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WHERE ARE THE LESSON FILES? 


Purchase of this Classroom in a Book in any format gives you access to the lesson 


files you'll need to complete the exercises in the book. 
1 Go to www.adobepress.com/AfterEffectsCIB2020. 
2 Sign in or create a new account. 


3 Click Submit. 


| Preson O Ol 
AdobePress — 
oea arene | erin O O 


aa a 
Register a Product 


Aagisier ihe Adaba Prasa products you own io unch benatts asacemied wt ten Serety oiar Bengfits ol 
(he 1009A oF 19A IBEN of your prodat pommel 
Regaterrg pou posta can arara P letonrg tanata 
son + Arcana te dowrdane tes art updates 
Creal + Acoupen w be wed en pour new purchase, 


eo (one Prat te Denes lor rayimiartng may wary by product) 


Tro ISBN i one bck cee yur pret and hs er ‘dca Proms Prometina! Mating a Soucis Oera 
maawe aucun steer Hae Pros sra ny oS 
Soca e oaaae a ay ere 


4 Answer the questions as proof of purchase. 


5 The lesson files can be accessed through the Registered Products tab on your 


Account page. 


6 Click the Access Bonus Content link below the title of your product to proceed 
to the download page. Click the lesson file links to download them to your 


computer. 
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GETTING STARTED 


Adobe After Effects provides a comprehensive set of 2D and 3D tools for 
compositing, animation, and effects that motion graphics professionals, visual 
effects artists, web designers, and film and video professionals need. After 
Effects is widely used for digital post-production of film, video, DVDs, and the 
web. You can composite layers in various ways, apply and combine sophisti- 
cated visual and audio effects, and animate both objects and effects. 


About Classroom in a Book 


Adobe After Effects Classroom in a Book (2020 Release) is part of the official 
training series for Adobe graphics and publishing software, developed with the 
support of Adobe product experts. The lessons are designed to let you learn 

at your own pace. If you’re new to Adobe After Effects, you'll learn the funda- 
mental concepts and features you'll need to master the program. And if you’ve 
been using Adobe After Effects for a while, you'll find that Classroom in a Book 
teaches many advanced features, including tips and techniques for using the 
latest version. 


Although each lesson provides step-by-step instructions for creating a specific 
project, there’s room for exploration and experimentation. You can follow 

the book from start to finish, or do only the lessons that match your interests 
and needs. Each lesson concludes with a review section summarizing what 
you've covered. 
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Prerequisites 


Before beginning to use Adobe After Effects Classroom in a Book (2020 Release), 
make sure that your system is set up correctly and that you've installed the 
required software and hardware. You should have a working knowledge of your 
computer and operating system. You should know how to use the mouse and 
standard menus and commands, and also how to open, save, and close files. If 
you need to review these techniques, see the printed or online documentation 
included with your Microsoft® Windows’ or Apple® macOS’ software. 


To complete the lessons in this book, you'll need to have Adobe After Effects, Adobe 
Bridge, and Adobe Media Encoder installed. Additional optional exercises require 
Adobe Premiere Pro, Adobe Audition, and Adobe Character Animator. The exer- 
cises in this book are based on After Effects (2020 release). 


Installing After Effects, Bridge, 
and Media Encoder 


Adobe After Effects is not included with the book; you must purchase it separately 
as part of an Adobe Creative Cloud subscription. For system requirements and 
complete instructions on installing the software, visit https://helpx.adobe.com/ 
after-effects/system-requirements.html. Note that After Effects requires a 64-bit 
operating system. To view QuickTime movies on macOS, you must also have Apple 
QuickTime 7.6.6 or later installed on your system. 


Some of the lessons in this book use Adobe Bridge or Adobe Media Encoder. After 
Effects, Bridge, and Media Encoder use separate installers. You must install these 
applications from Adobe Creative Cloud (adobe.com) onto your hard disk. Follow 
the onscreen instructions. 


Activating fonts 


Several lessons use specific fonts that may not be installed on your system. You 
can activate the fonts using Adobe Fonts or choose a different font on your system 
with similar characteristics. If you choose a different font, your projects won’t look 
exactly like the ones shown in the book. 


Adobe Fonts licenses are included in Creative Cloud subscriptions. 


To activate fonts within After Effects, choose File > Fonts From Adobe, or click the 
Creative Cloud icon next to Add Adobe Fonts in the Font menu in the Character 
panel. Then, find the font in Adobe Fonts in your browser, and activate the font. 


Optimizing performance 


Creating movies is memory-intensive work for a desktop computer. After Effects 
(2020 release) requires a minimum of 16GB of RAM. The more RAM that is available 
to After Effects, the faster the application will work for you. For information about 
optimizing memory, cache, and other settings for After Effects, see “Improve per- 
formance” in After Effects Help. 


Restoring default preferences 


The preferences files control the way the After Effects user interface appears on 
your screen. The instructions in this book assume that you see the default interface 
when they describe the appearance of tools, options, windows, panels, and so forth. 
Therefore, it’s a good idea to restore the default preferences, especially if you are 
new to After Effects. 


Each time you quit After Effects, the panel positions and certain command settings 
are recorded in the preferences files. To restore the original default settings, press 
Ctrl+ Alt+Shift (Windows) or Command+Option+Shift (macOS) while starting 
After Effects. (After Effects creates new preferences files if they don’t already exist 
the next time you start the program.) 


Restoring the default preferences can be especially helpful if someone has already 
customized After Effects on your computer. If your copy of After Effects hasn’t 
been used yet, these files won't exist, so this procedure is unnecessary. 


Important: If you want to save the current settings, you can rename a preferences 
file instead of deleting it. When you are ready to restore those settings, change the 
name back, and make sure that the file is located in the correct preferences folder. 


1 Locate the After Effects preferences folder on your computer: 


e For Windows: .../Users/<user name>/AppData/Roaming/Adobe/ 
AfterEffects/17.0 


e For macOS: .../Users/<user name>/Library/Preferences/Adobe/ 
After Effects/17.0 


2 Rename any preferences files you want to preserve, and then restart After Effects. 


@ Note: In macOS, 
the user library folder 
is hidden by default. 
To see it, in the Finder, 
choose Go > Go To 
Folder. In the Go To 


Folder dialog box, type 


~/Library, and then 
click Go. 
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Online content 


Your purchase of this Classroom in a Book includes the following online materials: 


Lesson files 


To work through the projects in this book, you will need to download the lesson 
files from adobepress.com. You can download the files for individual lessons or it 
may be possible to download them all in a single file. 


Web Edition 


The Web Edition is an online interactive version of the book providing an enhanced 
learning experience. Your Web Edition can be accessed from any device with a con- 
nection to the Internet, and it contains: 


e The complete text of the book 
e Hours of instructional video keyed to the text 


e Interactive quizzes 


Accessing the lesson files and Web Edition 


You must register your product on adobepress.com in order to access the online 
content: 


1 Go to www.adobepress.com/AfterEffectsCIB2020. 
Sign in or create a new account. 
Click Submit. 


2 
3 
4 Answer the questions as proof of purchase. 

5 You can access the lesson files from the Registered Products tab on your 
Account page: Click the Access Bonus Content link below the title of your 
product to proceed to the download page. Click the lesson file links to download 


them to your computer. 


You can access the Web Edition from the Digital Purchases tab on your Account 
page. Click the Launch link to access the product. 


© Note: If you purchased a digital product directly from www.adobepress.com or www.peachpit. 
com, your product will already be registered. However, you still need to follow the registration steps 
and answer the proof of purchase questions before the Access Bonus Content link will appear under 
the product on your Registered Products tab. 


Organizing the lesson files 


The files are compressed into ZIP archives to speed download time and protect the @ Note: If for any 

contents from damage during transfer. You must uncompress (or “unzip”) the files reason you need to 

t t them tothèi eee at t befi th ith the bool download fresh copies 
o restore them to their original size and format before you use them wi e book. of the lesson fles you 

Modern macOS and Windows systems are set up to open ZIP archives by simply can download them 

double-clicking. from your account 


again at any time. 
1 On your hard drive, create a new folder in a convenient location, and name it 


Lessons, following the standard procedure for your operating system: 


e In Windows, right-click, and choose New > Folder. Then enter the new name 
for your folder. 


e In macOS, in the Finder, choose File > New Folder. Type the new name, 
and drag the folder to the location you want to use. 


2 Drag the unzipped Lessons folder (which contains folders named Lesson01, 
Lesson02, and so on) that you downloaded onto your hard drive to your new 
Lessons folder. When you begin each lesson, navigate to the folder with that 
lesson number to access all the assets you need to complete the lesson. 


About copying the sample movies and projects 


You will create and render one or more movies in some lessons in this book. 
The files in the Sample_Movies folders are examples that you can use to see the 
end results of each lesson and to compare them with your own results. 


The files in the End_Project_File folders are samples of the completed project for each 
lesson. Use these files for reference if you want to compare your work in progress with 
the project files used to generate the sample movies. 


These sample movies and end-project files vary in size from relatively small to sev- 
eral megabytes, so you can either download them all now if you have ample storage 
space, or download just the files for each lesson as needed, and then delete them 
when you finish that lesson. 


How to use these lessons 


Each lesson in this book provides step-by-step instructions for creating one or more 
specific elements of a real-world project. The lessons build on each other in terms 
of concepts and skills, so the best way to learn from this book is to proceed through 
the lessons in sequential order. In this book, some techniques and processes are 
explained and described in detail only the first few times you perform them. 
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Many aspects of the After Effects application can be controlled by multiple tech- 
niques, such as a menu command, a button, dragging, and a keyboard shortcut. 
Only one or two of the methods are described in any given procedure, so that you 
can learn different ways of working even when the task is one you've done before. 


The organization of the lessons is also design-oriented rather than feature-oriented. 
That means, for example, that you'll work with layers and effects on real-world 
design projects over several lessons, rather than in just one lesson. 


Additional resources 


Adobe After Effects Classroom in a Book (2020 Release) is not meant to replace 
documentation that comes with the program or to be a comprehensive reference for 
every feature. Only the commands and options used in the lessons are explained in 
this book. 


Tutorials within After Effects can help you get started: In After Effects, choose 
Window > Learn. The Learn panel opens with a series of tutorials. 


For comprehensive information about program features and tutorials, refer to 
these resources: 


e Adobe After Effects Learn & Support: helpx.adobe.com/support/after- 
effects.html is where you can find and browse tutorials, help, and support on 
www.adobe.com. 


e After Effects tutorials: helpx.adobe.com/after-effects/tutorials.html lists 
online tutorials for beginner and experienced users. You can go there directly 
from After Effects by choosing Help > After Effects Online Tutorials. 


e After Effects Forums: community.adobe.com lets you tap into peer-to-peer 
discussions, and questions as well as answers about After Effects. 


e Adobe Create Magazine: create.adobe.com offers thoughtful articles 
on design and design issues, a gallery showcasing the work of top-notch 
designers, tutorials, and more. 


e Resources for educators: www.adobe.com/education and edex.adobe.com 
offer a treasure trove of information for instructors who teach classes on 
Adobe software. Find solutions for education at all levels, including free 
curricula that use an integrated approach to teaching Adobe software and 
can be used to prepare for the Adobe Certified Associate exams. 


Also check out these useful links: 


e Adobe Add-ons: exchange.adobe.com/addons is a central resource for 
finding tools, services, extensions, code samples, and more to supplement 
and extend your Adobe products. 


e Adobe After Effects product home page: www.adobe.com/products/ 
aftereffects 


Adobe Authorized Training Centers 


Adobe Authorized Training Centers offer instructor-led courses and training 
on Adobe products. A directory of AATCs is available at https://training.adobe. 
com/training/partner-finder.html 
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GETTING TO KNOW 
THE WORKFLOW 


Lesson overview 

In this lesson, you'll learn how to do the following: 
e Create a project and import footage. 

e Create compositions and arrange layers. 

e Navigate the Adobe After Effects interface. 

e Use the Project, Composition, and Timeline panels. 
e Transform layer properties. 

e Apply basic effects. 

e Create keyframes. 

e Preview your work. 

e Customize the workspace. 

e Adjust preferences related to the user interface. 


e Find additional resources for using After Effects. 


This lesson will take about an hour to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


on the move 


PROJECT: TITLE SEQUENCE 


Whether you use After Effects to animate a simple 
video title sequence or to create complex special 
effects, you generally follow the same basic workflow. 
The After Effects interface facilitates your work and 
adapts to each stage of production. 


About the After Effects work area 


After Effects offers a flexible, customizable work area. The main window of the program is called 
the application window. Panels are organized in this window in an arrangement called a workspace. 
The default workspace contains stacked panels as well as panels that stand alone, as shown below. 


A B c D 


A. Application window B. Composition panel C. Workspace bar D. Stacked panels E. Tools panel 
F. Project panel G. Timeline panel 


You customize a workspace by dragging the panels into the configuration that best suits your working 
style. You can drag panels to new locations, change the order of stacked panels, move panels into or out 

of a group, place panels alongside each other, stack panels, and undock a panel so that it floats in a new 
window above the application window. As you rearrange panels, the other panels resize automatically to fit 
the window. 


When you drag a panel by its tab to relocate it, the area where you can drop it—called a drop zone— 
becomes highlighted. The drop zone determines where and how the panel is inserted into the workspace. 
Dragging a panel to a drop zone either docks it, groups it, or stacks it. 


If you drop a panel along the edge of another panel, group, or window, it will dock next to the existing 
group, resizing all groups to accommodate the new panel. 


If you drop a panel in the middle of another panel or group, or along the tab area of a panel, it will be added 
to the existing group and be placed at the top of the stack. Grouping a panel does not resize other groups. 


You can also open a panel in a floating window. To do so, select the panel, and then choose Undock Panel 
or Undock Frame from the panel menu. Or, drag the panel or group outside the application window. 
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Getting started 


A basic After Effects workflow follows six steps: importing and organizing footage, 
creating compositions and arranging layers, adding effects, animating elements, 
previewing your work, and rendering and outputting the final composition so 

that it can be viewed by others. In this lesson, you will create a simple animated 
video using this workflow, and along the way, you'll learn your way around the 
After Effects interface. 


First, you'll preview the final movie to see what you'll create in this lesson. 


1 Make sure the following files are in the Lessons/Lesson01 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: movement.mp3, swimming_dog.mp4, title.psd 
e Inthe Sample_Movies folder: Lesson01.avi, Lesson01.mov 


2 Open and play the Lesson01.avi sample movie in Windows Movies & TV or the 
Lesson01.mov sample movie in QuickTime Player to see what you will create 
in this lesson. When you are done, close Windows Movies & TV or QuickTime 


Player. You may delete the sample movies from your hard disk if you have limited 


storage space. 


Creating a project and importing footage 


When you begin each lesson of this book, it’s a good idea to restore the default pref- 
erences for After Effects. (For more information, see “Restoring default preferences” 
on page 3.) You can do this with a simple keyboard shortcut. 


1 Start After Effects, and then immediately hold down Ctrl+Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. 


The Home window opens. It provides easy access to your recent After Effects 
projects, as well as to tutorials and more information about After Effects. 


2 Click New Project in the Home window. 


Build your skilts 


Tips to elevate your work 


» Tip: Restoring 
default preferences 
can be tricky in 
Windows, especially if 
you're working on a fast 
system. Press the keys 
after you double-click 
the application icon 
but before After Effects 
begins to list the files 
it’s activating. Alterna- 
tively, you can choose 
Edit > [your Creative 
Cloud account 
username] > Clear 
Settings, and then 
restart the application. 
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After Effects displays an empty, untitled project. 


@ AfterEffects File Edit Composition Layer Effect Animation View Window Help 


Adobe Attor niied Projeo 


Project 


> Tip: To quickly An After Effects project is a single file that stores references to all the footage 
maximize a panel, 
double-click the panel 
tab. To return it to its 
original size, double- 
click the tab again. 


you use in that project. It also contains compositions, which are the individual 
containers used to combine footage, apply effects, and, ultimately, drive the output. 


When you begin a project, often the first thing you'll do is add footage to it. 
3 Choose File > Import > File. 


4 Navigate to the Assets folder in your Lessons/Lesson01 folder. Shift-click to select 
the movement.mp3 and swimming_dog.mp4 files. Then click Import or Open. 


< toe ¥ Ct B Assets te; Q 
ag 
title.psd 
Enable: All Acceptable Files 
Format: 
Import As: c 
Create Composition 
< ot available 
e alphabetical order 
Options Cancel 
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A footage item is the basic unit in an After Effects project. You can import many 
types of footage items, including moving-image files, still-image files, still-image 
sequences, audio files, layered files from Adobe Photoshop and Adobe Illustrator, 
other After Effects projects, and projects created in Adobe Premiere® Pro. You can 
import footage items at any time. 


As you import assets, After Effects reports its progress in the Info panel. > Tip: You can also 
choose File > Import > 
Multiple Files to select 
files located in different 
folders or drag and drop 
files from Explorer or 
the Finder. You can use 
Adobe Bridge to search 
for, manage, preview, 
and import footage. 


Because one of the footage items for 
this project is a multilayer Photoshop 
file, you'll import it separately as a 
composition. 


5 Double-click in the lower area 
of the Project panel to open the 
Import File dialog box. 


Name > y 
]movementnps -DENS 
l=] swimming _doz.mpa EEEN 


N 


6 Navigate to the Lesson01/Assets folder again, and select the title.psd file. Choose 
Composition from the Import As menu. (In macOS, you may need to click 
Options to see the Import As menu.) Then click Import or Open. 


< toe ¥ Et @ Assets 2 Qq 


movement.mp3 swimming_dog.m 
p4 


Enable: All Acceptable Files 


Format: Photoshop 


neon (Gree) 


Create Composition 
Photoshop Sequence 
€ betical order 


Options Cancel 


After Effects opens an additional dialog box that displays options for the file you 
are importing. 
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) Tip: You can locate 
missing fonts or effects 
the same way. Choose 
File > Dependencies, 
and then choose Find 
Missing Fonts or Find 
Missing Effects. Or just 
type Missing Fonts or 
Missing Effects into 
the Search box in the 
Project panel. 


7 In the title.psd dialog box, choose 
Composition from the Import Kind 
menu to import the layered Photoshop 
file as a composition. Select Editable 
Layer Styles in the Layer Options area, 
and then click OK. 


The footage items appear in the Project 
panel. 


8 Inthe Project panel, click to select different footage items. Notice that a thumb- 
nail preview appears at the top of the Project panel. You can also see the file type 
and size, as well as other information about each item, in the Project panel columns. 


title v swimming_dogmp4 v 


title here 


When you import files, After Effects doesn’t copy the video and audio data itself 
into your project. Instead, each footage item in the Project panel contains a refer- 


ence link to the source files. When After Effects needs to retrieve image or audio 
data, it reads it from the source file. This keeps the project file small and allows 
you to update source files in another application without modifying the project. 


If you move a file or if After Effects can’t access its location, it will report that the 
file is missing. To identify missing files, choose File > Dependencies > Find Missing 
Footage. You can also type Missing Footage into the Search box in the Project 
panel to look for the missing assets. 


To save time and minimize the size and complexity of a project, you'll usually import 
a footage item once even if you're using it multiple times in a composition. However, 
you may sometimes need to import a source file more than once, such as if you want 
to use it at two different frame rates. 


14 LESSON 1. Getting to Know the Workflow 


After you've imported footage, it’s a good time to save the project. 


9 Choose File > Save. In the Save As dialog box, navigate to the Lessons/ 
Lesson01/Finished_Project folder. Name the project Lesson01_Finished.aep, 
and then click Save. 


Creating a composition and arranging layers 


The next step of the workflow is to create a composition. You create all animation, 
layering, and effects in a composition. An After Effects composition has both spatial 
dimensions and a temporal dimension (time). 


Compositions include one or more layers, arranged in the Composition panel 

and in the Timeline panel. Any item that you add to a composition—such as a 

still image, moving-image file, audio file, light layer, camera layer, or even another 
composition—becomes a new layer. Simple projects may include only one composi- 
tion, while elaborate projects may include several compositions to organize large 
amounts of footage or intricate effects sequences. 


To create a composition, you'll drag the footage items into the Timeline panel, 
and After Effects will create layers for them. 


1 Inthe Project panel, Shift-click 
to select the movement.mp3, 
swimming _dog.mp4, and title assets. 
Don't select the title Layers folder. 


2 Drag the selected footage items 
into the Timeline panel. The New 
Composition From Selection dialog 
box appears. 


)» Tip: To create 

a composition from 
footage as you import 
it, select Create 
Composition in the 
Import File dialog box. 
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After Effects bases the dimensions of the new composition on the selected footage. 
In this example, all of the footage is sized identically, so you'll accept the default 
settings for the composition. 


3 Select swimming_dog.mp4 in the Use Dimensions From menu, and then click 
OK to create the new composition. 


m:{( swimming_dog.mp4 


0:00;02:00 


The footage items appear as layers in the Timeline panel, and After Effects displays 
the composition, named swimming_dog, in the Composition panel. 


When you add a footage item to a composition, that footage becomes the source for 
a new layer. A composition can have any number of layers, and you can also include 
a composition as a layer in another composition, which is called nesting. 


Some of the assets are longer than others, but you want them all to continue only 
as long as the swimming dog is on the screen. You'll change the length of the entire 
composition to 7:00 to match the dog clip. 


4 Choose Composition > Composition Settings. 
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5 Inthe Composition Settings dialog box, rename the composition movement, 
type 7:00 for the Duration, and then click OK. 


v 


Square Pixels 


30 


Full 


0:00:00:00 


The Timeline panel displays the same duration for each of the layers. 


In this composition, there are three footage items, and therefore three layers in 
the Timeline panel. Depending on the order in which the elements were selected 
when you imported them, your layer stack may differ from the one shown on the 
previous page. The layers need to be in a specific order as you add effects and 
animations, however, so you'll rearrange them now. 


About layers 


Layers are the components you use to build a composition. Any item that you 
add to a composition—such as a still image, moving-image file, audio file, light 
layer, camera layer, or even another composition—becomes a new layer. Without 
layers, a composition consists only of an empty frame. 


Using layers, you can work with specific footage items in a composition without 
affecting any other footage. For example, you can move, rotate, and draw masks 
for one layer without disturbing any other layers in the composition, or you can 
use the same footage in more than one layer and use it differently in each instance. 
In general, the layer order in the Timeline panel corresponds to the stacking order in 
the Composition panel. 
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Ð Tip: To deselect all 
layers, click a blank area 
of the Timeline panel or 
press F2. 


® Note: This exercise 
is just the tip of the 
iceberg. You will learn 
more about effects and 
animation presets in 
Lesson 2,“Creating a 
Basic Animation Using 
Effects and Presets,’ and 
throughout the rest of 
this book. 


6 Click an empty area of the Timeline panel to deselect the layers, and then drag 
the title layer to the top of the layer stack, if it is not already there. Drag the 
movement.mp3 layer to the bottom of the layer stack. 


$F title 
B swimming_dog.mp4 
B 


lo] p 


7 Choose File > Save to save your project so far. 


Adding effects and modifying 
layer properties 


Now that your composition is set up, you can start having fun—applying effects, 
making transformations, and adding animation. You can add any combination of 
effects and modify any of a layer’s properties, such as size, placement, or opacity. 
Using effects, you can alter a layer’s appearance or sound, and even generate visual 
elements from scratch. The easiest way to start is to apply any of the hundreds of 
effects included with After Effects. 


Changing Transform properties 


The title is currently in the center of the screen, obscuring the dog and distracting 
from the action. You'll move it to the lower left corner, where it will remain visible 
but not in the way. 


1 Select the title layer (layer 1) in the Timeline panel. Notice that layer handles 
appear around the layer in the Composition panel. 


B swimming_dog.mp4 
B movement.mp3 
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2 Click the triangle to the left of the layer number to expand the layer, and 
then expand the layer’s Transform properties: Anchor Point, Position, Scale, 
Rotation, and Opacity. 


3 Ifyou can’t see the properties, scroll down the Timeline panel using the scroll 
bar at the right side of the panel. Better yet, select the title layer name again, 
and press P. 


T= = 
|S 


B swimming_dog mp4 
B movementmp3 


Expand Transform to see all its properties. Press P to see just the Position property. 
This keyboard shortcut displays only the Position property, which is the only property 
you want to change for this exercise. You'll move this layer to the lower left corner. 


4 Change the coordinates for the Position property to 265, 635. Or use the 
Selection tool to drag the title to the lower left corner of the screen. 


D Position 
B swimming_dog.mp4 
B movement.mp3 + tithefhhere 


5 Press P to hide the Position property, or click the triangle to the left of the layer 
number to hide all properties. 


Adding an effect to correct color 


After Effects includes several effects to correct or modify color in your projects. 
You'll use the Auto Contrast effect to adjust the overall contrast in the clip and 
intensify the color of the water. 
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@ Note: If you 
double-click a layer 

in the Timeline panel, 
After Effects opens 

the layer in the Layer 
panel. To return to the 
Composition panel, click 
the Composition tab. 


1 Select the swimming_dog.mp4 layer in the Timeline panel. 


2 Click the Effects & Presets panel (in the panel stack at the right side of the appli- 
cation window) to open it, and type contrast in the search box. 


After Effects searches for effects and presets that contain the letters you type, and 
displays the results interactively. Before you have finished typing, the Auto Contrast 
effect—located in the Color Correction category—appears in the panel. 


3 Drag the Auto Contrast effect onto the swimming_dog layer in the 
Timeline panel. 


ur Narr 
gF title 4 
s] swimming-dogmp iz 


B movement.mp3 


After Effects applies the effect and automatically opens the Effect Controls panel 
in the upper left area of the workspace. 


title here 
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The contrast intensifies colors a little more than you need. You'll customize the settings 
to reduce the effect. 


4 Inthe Effect Controls panel, click the number next to Blend With Original, 
type 20%, and press Enter or Return to accept the new value. 


title here 


Adding a stylistic effect 


After Effects also includes many stylistic effects. You'll add a beam of light to the clip 
to add an artistic touch. You'll change the settings of this effect to modify the angle 
and intensity of the light. 


1 Click the x in the search box in the Effects & Presets panel to clear it, and then 
locate the CC Light Sweep effect by doing one of the following: 


e Type CC Light in the search box. 


e Click the triangle next to Generate to expand the category in alphabetical order. 


2 Drag the CC Light Sweep effect in the Generate category onto the swimming_ 
dog layer name in the Timeline panel. After Effects adds the CC Light Sweep 
settings to the Effect Controls panel under the Auto Contrast effect. 
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3 Inthe Effect Controls panel, click the triangle next to the Auto Contrast effect 
to hide those settings so that you can see the CC Light Sweep settings more easily. 


title here 


First, you'll change the angle of the light. 

4 For Direction, type 37°. 

5 From the Shape menu, choose Smooth to widen and soften the light beam. 
6 For Width, type 68 to widen the beam a bit more. 
7 


Change the Sweep Intensity value to 20 to make the beam a little more subtle. 


title here 


8 Choose File > Save to save your work so far. 


Animating the composition 


So far, you've started a project, created a composition, imported footage, and 
applied some effects. It all looks great, but how about some movement? You've 
applied only static effects. 


In After Effects, you can change any combination of a layer’s properties over time 
using conventional keyframing, expressions, or keyframe assistants. You'll explore 
many of these methods throughout the lessons of this book. For this project, you'll 
apply an animation preset to introduce the title to the screen, and you'll animate 
the title’s color over time. 
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Preparing the text composition 


In this exercise, you'll work with a separate composition—the one you imported 
from a layered Photoshop file. 


1 Select the Project tab to display the Project panel, and then double-click the title @ Note: If the Project 
tab isn't visible, choose 
Window > Project to 

This composition is the layered Photoshop file you imported. Two layers—Title Here open the Project panel. 


composition to open it as a composition in its own Timeline panel. 


and Ellipse 1—appear in the Timeline panel. The Title Here layer contains place- 
holder text that was created in Photoshop. 


title v , used 1 tim 


tite here 


Title Here 
Ellipse 1 


At the top of the Composition panel is the Composition Navigator bar, which dis- 
plays the relationship between the main composition (movement) and the current 
composition (title), which is nested within the main composition. 


title here 


You can nest multiple compositions within each other; the Composition Navigator 
bar displays the entire composition path. Arrows between the composition names 
indicate the direction in which information flows. 


Before you can replace the text, you need to make the layer editable. 
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@ Note: If you see 2 Select the Title Here layer (layer 1) in the Timeline panel, and then choose Layer > 
a warning about Create > Convert To Editable Text. 

missing fonts or layer 
dependencies, click 
OK. If Adobe Fonts 
opens, activate the 
missing font. al ae 


© 


H Ellipse 1 


tithe here 


Ci : title here 


SS 
Ellipse 1 


A T icon appears next to the layer name in the Timeline panel, indicating that it 
is now an editable text layer. The layer is also selected in the Composition panel, 
ready for you to edit. 


The blue lines at the top, bottom, and sides of the Composition panel indicate 
title-safe and action-safe zones. Television sets enlarge a video image and allow 
some portion of its outer edges to be cut off by the edge of the screen. This is 
known as overscan. The amount of overscan is not consistent between television 
sets, so you should keep important parts of a video image, such as action or titles, 
within margins called safe zones. Keep your text inside the inner blue guides to 
ensure that it is in the title-safe zone, and keep important scene elements inside 
the outer blue guides to ensure that they are in the action-safe zone. 


Editing text 


You'll start by replacing the placeholder text with real text. Then you'll format 
it to fit the space better. 


@ Note: After Effects 1 Select the Horizontal Type tool (T) in the Tools panel, and drag over the 

offers robust character placeholder text in the Composition panel to select it. Then type on the move. 
and paragraph 
formatting controls, 
but the default 
settings—whatever 
typeface appears when 
you type—should be 
fine for this project. 
You'll learn more 
about type in Lesson 3, 
“Animating Text.’ 


on the move 
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About the Tools panel 


As soon as you create a composition, the tools in the Tools panel in the upper 
left corner of the After Effects application window become available. After Effects 
includes tools that enable you to modify elements of your composition. Some of 
these tools—the Selection tool and the Hand tool, for example—will be familiar 
to you if you use other Adobe applications, such as Photoshop. Others will be new. 


A B CD EF G H | J KLM N O 
L | 


Jeo Bs TT SLD KHR 


A. Home B. Selection C. Hand D.Zoom E. Rotation F. Camera tools G. Pan Behind 
H. Mask and Shape tools I. Pen tools J. Type tools K. Brush L. Clone Stamp M. Eraser 
N. Roto Brush and Refine Edge tools O. Puppet tools 


When you hover the pointer over any button in the Tools panel, a tool tip identifies 
the tool and its keyboard shortcut. A small triangle in the lower right corner of the 
button indicates that one or more additional tools are hidden behind it. Click and 
hold the button to display the hidden tools, and then select the tool you want to use. 


2 Select the text again. Then, in the Character panel (docked on the right side 
of the screen), change the text size to 100 px and the tracking to —50. 


on the move 


Animating text with animation presets 


Now that the text is formatted, you can apply an animation preset. You'll use the 
Fade Up Words preset, so the words will appear in order over time. 


1 Select the Title Here layer in the Timeline panel again, and make sure you’re 
at the first frame of the animation by doing one of the following: 


e Drag the current-time indicator all the way to the left of the time ruler, to 0:00. 


e Press the Home key on your keyboard. 
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Ð Tip: If you don't see 
the Effects & Presets 
tab, choose Window > 
Effects & Presets. 


2 Select the Effects & Presets tab to display the Effects & Presets panel. Then type 
fade up words in the search box. 


3 Select the Fade Up Words effect in the Animate In category, and drag it onto 
the on the move text in the Composition panel. 


P- fade up words xi 


* Animation Preset 


After Effects adds the effect. Because it’s a simple effect, there are no settings 
in the Effect Controls panel. 


4 Manually preview the effect by dragging the current-time indicator from 
0:00 to 1:00. The words fade in, so that they are all onscreen by 1:00. 


| enma i gii = bios 


About timecode and duration 


The primary concept related to time is duration, or length. Each footage item, 
layer, and composition in a project has its own duration, which is reflected in the 
beginning and ending times displayed in the time rulers in the Composition, Layer, 
and Timeline panels. 


The way you view and specify time in After Effects depends on the display style, 

or unit of measure, that you use to describe time. By default, After Effects displays 
time in Society of Motion Picture and Television Engineers (SMPTE) timecode: 
hours, minutes, seconds, and frames. Note that the figures are separated by 
semicolons in the After Effects interface, representing drop-frame timecode 
(which adjusts for the real-time frame rate), but this book uses a colon to represent 
non-drop-frame timecode. 


To learn when and how to change to another system of time display, such as frames, 
or feet and frames of film, see After Effects Help. 
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About the Timeline panel 


Use the Timeline panel to animate layer properties and set In and Out points for a layer. (In and 

Out points are the points at which a layer begins and ends in the composition.) Many of the Timeline 
panel controls are organized in columns of related functions. By default, the Timeline panel contains 
a number of columns and controls, as shown here: 


T T T 

D E F G 
A. Current time B. Composition name C. Timeline panel menu D. Audio/Video Switches column 
E. Source Name/Layer Name column F. Layer switches G. Time graph/Graph Editor area 


Understanding the time graph 


The time graph portion of the Timeline panel (the right side) contains a time ruler, markers to indicate 
specific times, and duration bars for the layers in your composition. 


A. Time navigator start and end brackets 
B. Work area start and end brackets 

C. Time zoom slider 

D. Time ruler 

E. Composition marker bin 

F. Composition button 


Before delving too deeply into animation, it will help to understand at least some of these controls. 

The duration of a composition, a layer, or a footage item is represented visually in the time graph. On the 
time ruler, the current-time indicator marks the frame you are viewing or editing, and the frame appears 
in the Composition panel. 


The work area start and end brackets indicate the part of the composition that will be rendered for 
previews or final output. When you work on a composition, you may want to render only a portion 
of it by specifying a segment of the composition time ruler as a work area. 


Acomposition’s current time appears in the upper left corner of the Timeline panel. To move to a different 
time, drag the current-time indicator in the time ruler—or click the current-time field in the Timeline 
panel or Composition panel, type a new time, and press Enter or Return, or click OK. 


For more information about the Timeline panel, see After Effects Help. 
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Animating effects using keyframes 


You'll add an effect to the type layer, but this time, you'll animate its settings using 
keyframes. 


1 Go to the beginning of the time ruler by doing one of the following: 


e Drag the current-time indicator to the left in the time ruler so that 
it’s positioned at 0:00. 


e Click the Current Time field in the Timeline panel or Composition panel, 
and type 00. If you clicked in the Current Time field in the Composition 
panel, click OK to close the Go To Time dialog box. 


2 Type channel blur in the search box in the Effects & Presets panel. 
3 Drag the Channel Blur effect onto the Title Here layer in the Timeline panel. 


After Effects adds the Channel Blur effect to the layer and displays its settings in the 
Effect Controls panel. The Channel Blur effect individually blurs the red, green, blue, 
and alpha channels in a layer. It will create an interesting look for the title. 


4 Inthe Effect Controls panel, set the Red Blurriness, Green Blurriness, Blue 
Blurriness, and Alpha Blurriness values to 50. 


5 Click the stopwatch icon (6) next to each of the settings you changed to create 
initial keyframes. The text will be blurred as it first appears. 


Keyframes are used to create and control animation, effects, audio properties, 
and many other kinds of changes that occur over time. A keyframe marks the 
point in time where you specify a value, such as spatial position, opacity, or audio 
volume. Values between keyframes are interpolated. When you use keyframes to 
create a change over time, you must use at least two keyframes—one for the state 
at the beginning of the change, and one for the state at the end of the change. 


6 From the Blur Dimensions menu, choose Vertical. 
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7 Go to 1:00 in the timeline. 

8 Change the values to the following: 
e Red Blurriness: 0 
e Green Blurriness: 0 
e Blue Blurriness: 0 


e Alpha Blurriness: 0 


on the move 


9 Manually preview the effect by moving the current-time indicator from 0 to 1:00. 


hs EE 


Changing the opacity of the background 


The title looks good, but the ellipse is too bright. You'll change its opacity so that > Tip: To remember 

the water in the video shows through. the keyboard shortcut 
for the Opacity 

1 Inthe Timeline panel, select the Ellipse 1 layer. property, think of it 


as transparency. 
2 Press T to reveal the layer’s Opacity property. 


3 Change the Opacity value to 20%. 


P Tip: To see how 
the title appears over 
the water, click the 
movement tab in the 
Timeline panel. 


T Ti p 
Ellipse 1 à. 


: Opaaty 
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> Tip: Verify that the 
work area brackets 
include all the frames 
you want to preview. 


Previewing your work 


You're probably eager to see the results of your work. You can preview your compo- 
sition using the Preview panel, which is in the stacked panels on the right side of the 
application window in the default workspace. To preview your composition, click 
the Play/Stop button in the Preview panel, or press the spacebar on your keyboard. 


1 Inthe title Timeline panel, hide all layer properties, and deselect all layers. 


2 Make sure that the Video switch (#) is selected for the layers that you want 
to preview—in this case, the Title Here and Ellipse 1 layers. 


3 Press the Home key to go to the beginning of the time ruler. 
4 Do one of the following: 


e Click the Play/Stop button (P) in the Preview panel. 
e Press the spacebar. 


ofpeh & | Layer Name 
> M1 T Title Here 
Ellipse 1 


5 To stop the preview, do one of the following: 
e Click the Play/Stop button in the Preview panel. 


e Press the spacebar. 


You’ve previewed a simple animation, so it probably played back in real time. 


When you press the spacebar or click the Play/Stop button, After Effects caches 
the composition and allocates enough RAM to play the preview (with audio) as 
fast as the system allows, up to the frame rate of the composition. The number 

of frames played depends on the amount of RAM available to the application. 
Often, the preview will play in real time only after After Effects has cached all the 
included frames. 


In the Timeline panel, the preview plays either the span of time you specify as the 
work area, or from the beginning of the time ruler. In the Layer and Footage panels, 
the preview plays only untrimmed footage. Before you preview, check which frames 
are designated as the work area. 
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Now you'll preview the entire composition—the animated text plus graphic effects. 
6 Click the movement tab in the Timeline panel to bring it forward. 


7 Make sure that the Video switch (#) is turned on for all of the layers in the 
composition except the audio layer, and press F2 to deselect all layers. 


8 Drag the current-time indicator to the beginning of the time ruler, or press 


the Home key. 


EJ title 
B swimming_dog.mp4 
B movementmp3 


9 To start the preview, click the Play/Stop button (®) in the Preview panel, or press 
the spacebar. 


A green progress bar indicates which frames are cached to RAM. When all of the 
frames in the work area are cached, the preview plays back in real time. Until all 
the frames are cached, the playback may be slower and the audio may drag. 
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P Tip: See the status 
of GPU acceleration 
quickly. The rocket icon 
at the bottom of the 
Project panel is dimmed 
when GPU acceleration 
is disabled. 


The more detail and precision you want to preview, the more RAM is required. 
You can control the amount of detail shown by changing the resolution, magni- 
fication, and preview quality of your composition. You can also limit the number 
of layers previewed by turning off the Video switch for certain layers, or limit the 
number of frames previewed by adjusting the composition’s work area. 


10 Press the spacebar to stop the preview. 


11 Choose File > Save to save your project. 


Optimizing performance in After Effects 


How you configure After Effects and your computer determines how quickly 

After Effects renders projects. Complex compositions can require a large amount 
of memory to render, and the rendered movies can take a large amount of disk 
space to store. Search for “Improve Performance” in After Effects Help for tips that 
can help you configure your system, After Effects preferences, and your projects 
for better performance. 


By default, After Effects enables GPU acceleration for effects, layer animations, 
and other features that can take advantage of the performance enhancements. 
Adobe recommends enabling GPU acceleration. However, if you receive an error 
or know that your system’s GPU is not compatible with After Effects, you can 
disable GPU acceleration for a project: Choose File > Project Settings, and then 
choose Mercury Software Only on the Video Rendering And Effects tab. 


Rendering and exporting your composition 


When you're finished with your masterpiece—as you are now—you can render and 
export it at the quality settings you choose, and create movies in the formats that 
you specify. You will learn about exporting compositions in subsequent lessons, 
especially in Lesson 15, “Rendering and Outputting” 
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Customizing workspaces 


In the course of this project, you may have resized or repositioned some panels 

or opened new ones. As you modify a workspace, After Effects saves those 
modifications, so the next time you open the project, the most recent version 

of a workspace is used. However, you can choose to restore the original workspace 
at any time by choosing Window > Workspace > Reset “Default” To Saved Layout. 


Alternatively, if you find yourself frequently using panels that aren’t part of the 
Default workspace, or if you like to resize or group panels for different types 

of projects, you can save time by customizing the workspace to suit your needs. 
You can save any workspace configuration, or use any of the preset workspaces 

that come with After Effects. These predefined workspaces are suitable for different 
types of workflows, such as animation or effects work. 


Using predefined workspaces 
Take a minute to explore the predefined workspaces in After Effects. 


1 Ifyou closed the Lesson01_Finished.aep project, open it—or any other project— 
to explore the workspaces. 


2 Click Animation in the Workspace bar, which is next to the Tools panel. Click 
the double arrows (>?) to see workspaces that don’t fit in the Workspace bar. 


Motion Tracking 


Edit Work 


After Effects opens the following panels at the right side of the application window: 
Info, Preview, Effects & Presets, Motion Sketch, Wiggler, Smoother, and Audio. 
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You can also change workspaces using the Workspace menu. 
3 Choose Window > Workspace > Motion Tracking. 


Different panels open. The Info, Preview, Tracker, and Content-Aware Fill panels give 
you easy access to the tools and controls you need to focus on tracking objects in your 
compositions. 


Saving a custom workspace 


You can save any workspace, at any time, as a custom workspace. Once saved, 
new and edited workspaces appear in the Window > Workspace submenu and 

in the Workspace bar at the top of the application window. If a project with 

a custom workspace is opened on a system other than the one on which it was 
created, After Effects looks for a workspace with a matching name. If After Effects 
finds a match (and the monitor configuration matches), it uses that workspace; 

if it can’t find a match (or the monitor configuration doesn’t match), it opens the 
project using the current local workspace. 


1 Close a panel by choosing Close Panel from its panel menu. 


Close Panel 
Undock Panel X 
Close Other Panels in Group 
Panel Group Settings > 


Auto Color Display 


2 Choose Window > Effects & Presets to open another panel. 
The Effects & Presets panel is added to the panel stack. 


3 Choose Window > Workspace > Save As New Workspace. Enter a name for the 
workspace, and click OK to save it, or click Cancel if you don’t want to save it. 


4 Click Default in the Workspace bar to restore the original panels. 
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Controlling the brightness of the 
user interface 


You can brighten or darken the After Effects user interface. Changing the brightness 
preference affects panels, windows, and dialog boxes. 


1 Choose Edit > Preferences > Appearance (Windows) or After Effects > 
Preferences > Appearance (macOS). 


2 Drag the Brightness slider to the left or right, and notice how the screen changes. 


General 
Previews 
Display 


Import 


Output 


Grids & Guides 
Labets 
Media & Disk Cache 


Video Preview 


3 Click OK to save the new brightness setting or Cancel to leave your preferences 


unchanged. You can click Default to restore the default brightness setting. 


4 Choose File > Close Project to close the file without saving any changes. 


© Note: By default, 
the After Effects user 
interface is dark. We've 
used a lighter interface 
for the images in this 
book, so that text in 
the interface is visible 
in print. If you use the 
default UI brightness, 
your panels and dialog 
boxes will appear darker 
than ours. 
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Finding resources for using After Effects 


After Effects includes interactive tutorials in the application itself. To access them, 
select Learn in the Workspace bar. An overview of the interface and essential features 
is available in the Learn panel, as are several interactive tutorials. 


The Home window that appears when you open the application provides quick 
access to the tutorials in the Learn panel as well as more advanced tutorials online. 
Additionally, it provides links to other information to help you get the most out of 
After Effects. You can return to the Home window at any time by clicking the Home 
icon in the Tools panel. 


For complete and up-to-date information about using After Effects panels, tools, 
and other application features, visit the Adobe website. To search for information 
in After Effects Help and support documents, as well as on other websites relevant 
to After Effects users, simply enter a search term in the Search Help box in the 
upper right corner of the application window. You can narrow the results to view 
only Adobe Help and support documents. 


For additional resources, such as tips and techniques and the latest product infor- 
mation, check out the After Effects Help And Support page at helpx.adobe.com/ 
after-effects.html. 


Congratulations! You’ve finished Lesson 1. Now that you're acquainted with the 
After Effects workspace, you can continue to Lesson 2 to learn how to create and 
animate compositions using effects and preset animations, or you can proceed 
to another lesson in this book. 


Getting to Know the Workflow 


Review questions 


u F&F WwW N 


What are the basic components of the After Effects workflow? 
What is a composition? 

How can you find missing footage? 

How can you preview your work in After Effects? 


How can you customize an After Effects workspace? 


Review answers 


Most After Effects workflows include these steps: importing and organizing footage, 
creating compositions and arranging layers, adding effects, animating elements, 
previewing your work, and rendering and exporting the final composition. 


A composition is where you create all animation, layering, and effects. An After Effects 
composition has both spatial and temporal (time) dimensions. Compositions include one 
or more layers—video, audio, still images—arranged in the Composition panel and in 
the Timeline panel. Simple projects may include only one composition, while elaborate 
projects may include several compositions to organize large amounts of footage or 
intricate effects sequences. 


To locate missing footage, choose File > Dependencies > Find Missing Footage. Or type 
Missing Footage into the Search field in the Project panel. 


You can manually preview your work in After Effects by moving the current-time 
indicator, or you can press the spacebar or click the Play/Stop button in the Preview 
panel to preview your composition from the current-time indicator to the end of the 
composition. After Effects allocates enough RAM to play the preview (with audio) as fast 
as the system allows, up to the frame rate of the composition. 


You can customize an After Effects workspace by dragging the panels into the 
configuration that best suits your working style. You can drag panels to new locations, 
move panels into or out of groups, place panels alongside each other, stack panels, and 
undock a panel so that it floats above the application window. As you rearrange panels, 
the other panels resize automatically to fit the application window. You can save 
custom workspaces by choosing Window > Workspace > Save As New Workspace. 
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CREATING A BASIC ANIMATION 
USING EFFECTS AND PRESETS 


Lesson overview 

In this lesson, you'll learn how to do the following: 

e Use Adobe Bridge to preview and import footage items. 
e Work with the layers of an imported Adobe Illustrator file. 
e Use guides to position objects. 

e Apply drop-shadow and emboss effects. 

e Apply a text animation preset. 

e Adjust the time range of a text animation preset. 

e Precompose layers. 

e Apply a dissolve transition effect. 

e Adjust the transparency of a layer. 


e Render an animation for broadcast use. 


This lesson will take about an hour to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


PROJECT: ANIMATED LOGO 


Hit the ground running with a variety of effects and 
animation presets in After Effects. You can use them 
to create great-looking animations quickly and easily. 


Getting started 


In this lesson, you will become more familiar with the Adobe After Effects project 
workflow. You'll learn new ways to accomplish basic tasks as you create a simple 
identification graphic for a fictional travel show called “Travel Europe” on the 
fictional Destinations cable network. You will animate the travel show ID so that it 
fades to become a watermark that can appear in the lower right corner of the screen 
during other TV programs. Then you'll export the ID for use in broadcast output. 


First, take a look at the final project files to see what you'll be doing. 


1 Make sure the following files are in the Lessons/Lesson02 folder 
on your hard disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: destinations_logo.ai, ParisRiver.jpg 
e Inthe Sample_Movies folder: Lesson02.avi, Lesson02.mov 


2 Open and play the Lesson02.avi sample movie in Windows Movies & TV 
or the Lesson02.mov sample movie in QuickTime Player to see what you 
will create in this lesson. When you are done, close Windows Movies & TV or 
QuickTime Player. You may delete the sample movies from your hard disk if you 
have limited storage space. 


Before you begin the lesson, you'll restore the default application settings for After 
Effects. See “Restoring default preferences” on page 3 for more information. 


3 Start After Effects, and then immediately hold down Ctrl+Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. 


4 Inthe Home window, click New Project. 
After Effects opens to display a blank, untitled project. 
5 Choose File > Save As > Save As. 


6 Inthe Save As dialog box, navigate to the Lessons/Lesson02/ 
Finished_Project folder. 


7 Name the project Lesson02_Finished.aep, and then click Save. 
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Importing footage using Adobe Bridge 


In Lesson 1, you chose File > Import > File to import footage. However, you can 
also use Adobe Bridge—a powerful, flexible tool for organizing, browsing, and 
locating the assets you need to create content for print, web, television, DVD, film, 
and mobile devices. Adobe Bridge keeps native Adobe files (such as PSD and PDF 
files) as well as non-Adobe application files available for easy access. You can drag 


assets into your layouts, projects, and compositions as needed; preview your assets; 


and even add metadata (file information) to assets to make files easier to locate. 


Adobe Bridge is not automatically installed with After Effects. You'll need 


to install it separately. If Bridge is not installed, you'll be prompted to install it when 


you choose File > Browse In Bridge. 


In this exercise, you will jump to Adobe Bridge to import the still image that will 
serve as the background of your composition. 


1 Choose File > Browse In Bridge. If you receive a message about enabling an 
extension to Adobe Bridge, click Yes. 


Adobe Bridge opens, displaying a collection of panels, menus, and buttons. 
2 Click the Folders tab in the upper left corner of Adobe Bridge. 


3 In the Folders panel, navigate to the Lessons/Lesson02/Assets folder. Click the 
arrows to open nested folders. You can also double-click folder thumbnail icons 
in the Content panel. 


E Assets - Opening in Adobe After Effects 2020 


File Edit View Stacks Label Tools Window Help 


The Content panel updates interactively. For example, when you select the Assets 
folder in the Folders panel, thumbnail previews of the folder’s contents appear in the 
Content panel. Adobe Bridge displays previews of image files such as those in PSD, 
TIFF, and JPEG formats, as well as Illustrator vector files, multipage Adobe PDF 
files, QuickTime movie files, and more. 


P Tip: You can 

use Adobe Bridge 
separately to manage 
your files. To open 
Adobe Bridge directly, 
choose Adobe Bridge 
from the Start menu 
(Windows) or double- 
click the Adobe Bridge 
icon in the Applications / 
Adobe Bridge folder 
(macOS). 


@ Note: We're 

using the Essentials 
workspace, which is 
the default workspace 
in Bridge. 
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> Tip: To prioritize 4 Drag the thumbnail slider at the bottom of the Adobe Bridge window to enlarge 
different information 

in Adobe Bridge, 
change the workspace: 
Choose Window > 
Workspace, and then 
select a workspace. See 
Adobe Bridge Help to 
learn about customizing 
Adobe Bridge. 


the thumbnail previews. 


—>h 


5 Select the ParisRiver.jpg file in the Content panel, and notice that it appears in 
the Preview panel as well. Information about the file, including its creation date, 
bit depth, and file size, appears in the Metadata panel. 


ParisRiver ipg 


6 Double-click the ParisRiver.jpg thumbnail in the Content panel to place the 
file in your After Effects project. Alternatively, you can drag the ParisRiverjpg 
thumbnail into the Project panel in After Effects. 


7 Return to After Effects, if you're not already there. 


Project = 


mm Paris 


@ Type Size 
ImporterJPEG 1.1 MB 


You can close Adobe Bridge if you'd like. You won't be using it again during this lesson. 
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Creating a new composition 


Following the workflow you learned in Lesson 1, the next step is to create a new 
composition. You'll create the composition, and then add your footage items to it. 


Creating an empty composition 
First, you'll create the composition itself, without any layers. 
1 Create a new composition by doing one of the following: 


e Click the Create A New Composition button (Œ) at the bottom of the 
Project panel. 


e Click the New Composition button in the Composition panel. 
e Choose Composition > New Composition. 
e Press Ctrl+N (Windows) or Command+N (macOS). 
2 Inthe Composition Settings dialog box, do the following: 
e Name the composition Destinations. 


e Choose NTSC D1 from the Preset pop-up menu. NTSC D1 is the resolution 
for standard-definition television in the United States and some other coun- 
tries. This preset automatically sets the width, height, pixel aspect ratio, and 
frame rate for the composition to NTSC standards. 


e Inthe Duration field, type 300 to specify 3 seconds. 
e Click OK. 


Composition Settings x 
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After Effects displays an empty composition named Destinations in the Composition 
panel and in the Timeline panel. Now, you'll add the background. 


3 Drag the ParisRiver.jpg footage item from the Project panel to the Timeline panel 
to add it to the Destinations composition. 


| Project = 


mm ParisRiver.jpgv , used 1 time 


A E 


® Type Frai - 
E Destinations Composition 29.97 sa 


ImporterJPEG 1.1 MB 


Destinatiqns = 


Ð Tip: The keyboard 4 With the ParisRiver layer selected in the Timeline panel, choose Layer > 
shortcut for fitting a 
layer to a composition S 
is Ctrl+Alt+F (Windows) of the composition. 
or Command+Option+F 
(macOS). 


Transform > Fit To Comp to scale the background image to the dimensions 


Importing the foreground element 


Your background is now in place. The foreground object you'll use is a layered 
vector graphic that was created in Illustrator. 
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1 Choose File > Import > File. 


2 Inthe Import File dialog box, select the destinations_logo.ai file in the Lessons/ 
Lesson02/Assets folder. (The file appears as destinations_logo if file extensions 
are hidden.) 


3 Choose Composition from the Import As menu. (In macOS, you may need to click 
Options to display the Import As menu). Then click Import or Open. 


E import Fite x 
t > ThisPC > Desktop > Lessons > Lesson02 > Assets v © © Search Assets P 
Organize + New folder =- m Q 
~ oo a 
a Quick access 
E Desktop + n2 gS 
$ Downloads # 
M Documents # 
destinations Jog ParisRiver 
© Pictures wy oai pe 
Sequence Options: 
Miustrator/PDF/EPS (_] tilustrator/PDE/EPS Sequence 
Import As: 


Force alphabetical order 


Import Options: 
[_] Greate Composition 


File name: | destinations jogo.ai ~| All Acceptable Files ¥ 


Import Folder import N Cancel 


The Illustrator file is added to the Project panel as a composition named 
destinations_logo. A folder named destinations_logo Layers also appears. This 
folder contains the three individual layers of the Illustrator file. Click the triangle 
to open the folder and see its contents if you like. 


4 Drag the destinations_logo composition file from the Project panel into the 
Timeline panel above the ParisRiver layer. 


Destinations = 


Name 


+ S Pi, 
Sy | destinations logo (ES 


2 B ParisRiver.jpg F 


You should now see both the background image and the logo in the Composition 
panel and in the Timeline panel. 


5 Choose File > Save to save your work so far. 
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Working with imported Illustrator layers 


The destinations_logo graphic was created in Illustrator; your job in After Effects 
is to add text and animate it. To work with the layers of the Illustrator file indepen- 
dently of the background footage, you'll open the destinations_logo composition in 
its own Timeline and Composition panels. 


1 Double-click the destinations_logo composition in the Project panel. 


Project = 


destinations_logo v , used 1 time 
640 x 480 (1.00) 
A 0;00;03;00, 29.97 fps 


+ 


Name a ® Type 


E Destinations Composition 


(3 |destinations_logo Composition 


> E destina_ogo Layers Folder 
a ParisRiver.jpg E ImporterJPEG 11MB 


estinations 


Layer Name 

; rotated type 
< Globe logo 

: crop area 


The composition opens in its own Timeline and Composition panels. 


2 Select the Horizontal Type tool (T) in the Tools panel, and click in the 
Composition panel. 


3 Type TRAVEL EUROPE, all capital letters, and then select all of the text 
you just entered. 


Y 


7) 


TRAVEL EUROPE 
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Notice that the generic Text 1 layer name in the Timeline panel changes to TRAVEL 
EUROPE, the text you typed. 


4 Inthe Character panel, select a sans serif typeface such as Myriad Pro, and 
change the font size to 24 pixels. Click the eyedropper (#) in the Character 
panel, and click the rotated “Destinations” text on the logo to select the green 
color. After Effects applies it to the text you typed. Leave all other options in 
the Character panel at their defaults. 


Character 


Myriad Pro 


Regular 


7 


You'll position the text you just typed using a guide. 


5 Select the Selection tool (>). 


6 Choose View > Show Rulers, and then drag a guide from the left ruler into 
the Composition panel. 


7 Right-click or Control-click the guide, click Edit Position, type 170 in the Edit 
Value dialog box, and click OK. The guide moves to the position you specified. 


8 Drag the text up next to the image, snapping its left side to the guide. 


9 Choose View > Show Rulers, and then choose View > Show Guides to hide 
the ruler and the guide. 


10 Choose File > Save to save your work. 


Destinations destinations_logo = 


Layer Name Pe 
T EX 

. rotated type à 
« Globe logo 

ș Crop area 


7 
Z 
4 
4 
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© Note: Ifthe 
Character panel isn’t 
open, choose Window > 
Character. You may 
need to expand the 
width of the panel to 
see the eyedropper. 


> Tip: You can also 
choose View > Show 
Grid to make the 
nonprinting grid visible 
to help you position 
objects. Choose View > 
Show Grid again to hide 
the grid later. 
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Applying effects to a layer 


Now you will return to the main composition, Destinations, and apply an effect 
to the destinations_logo layer. This will apply the effect to all of the layers nested 
in the destinations_logo composition. 


1 Click the Destinations tab in the Timeline panel, and then select the 
destinations_logo layer. 


The effect you create next will be applied only to the logo elements, not to the back- 
ground image of the river. 


2 Choose Effect > Perspective > Drop Shadow. 


Source Name Q 
(® | destinations logo [E2 


E ParisRiver.jpg 


A soft-edged shadow appears behind the nested layers of the destinations_logo 
layer—the logo graphic, the rotated type, and the words Travel Europe—in the 
Composition panel. You can customize the effect using the Effect Controls panel, 
which appears in front of the Project panel when you apply an effect. 


3 Inthe Effect Controls panel, reduce the drop shadow’s Distance to 3 and 
increase its Softness to 4. You can set each value by clicking the field and typing 
the number or by dragging the blue value. 


& Effect Controls 
estinations - destinations_logo 
=>] Drop Shadow | 
© Shadow Color 
) Opacity 
v P) Direction 


> © Distance 


> © Softness 
Shadow Only 


The drop shadow is nice, but the logo will stand out even more if you apply an emboss 
effect. You can use either the Effect menu or the Effects & Presets panel to locate 
and apply effects. 
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Applying and controlling effects 


You can apply or remove an effect at any time. Once you've applied effects 

to a layer, you can temporarily turn off one or all of the effects in the layer to 
concentrate on another aspect of your composition. Effects that are turned off 
do not appear in the Composition panel, and typically aren't included when the 
layer is previewed or rendered. 


By default, when you apply an effect to a layer, the effect is active for the duration 
of the layer. However, you can make an effect start and stop at specific times, or 
make the effect more or less intense over time. You'll learn more about creating 
animation using keyframes or expressions in Lesson 5, “Animating a Multimedia 
Presentation,’ and Lesson 6, “Animating Layers.’ 


You can apply and edit effects on adjustment layers just as you do with other layers. 
Note, however, that when you apply an effect to an adjustment layer, the effect is 
applied to all layers below it in the Timeline panel. 


Effects can also be saved, browsed, and applied as animation presets. 


4 Click the Effects & Presets tab to open the panel. Then click the triangle next 
to Stylize to expand the category. 


5 With the destinations_logo layer selected in the Timeline panel, drag the 
Color Emboss effect into the Composition panel. 


The Color Emboss effect sharpens the edges of objects in the layer without sup- 
pressing the original colors. The Effect Controls panel displays the Color Emboss 
effect and its settings below the Drop Shadow effect. 


Effects & Presets 


> * Animation Presets 
> 3D Channel 


] v Stylize 

3 Brush Strokes 
Cartoon 
CC Block Load 
CC Burn Film 
CC Glass 
CC HexTile 
CC Kaleida 
CC Mr. Smoothie 
CC Plastic 
CC Repefile 
} CC Threshold 


2) 
52 
3) 
w 
m 
16] 
a 


m 
= 


MA Emboss 


6 Choose File > Save to save your work. 
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Applying an animation preset 


You've positioned the type and applied some effects to it. It’s time to add some 
animation! You will learn several ways to animate text in Lesson 3; for now, you'll 
use a simple animation preset that will fade the words Travel Europe onto the 
screen next to the logo. You'll need to work in the destinations_logo composition 
so that you can apply the animation to only the TRAVEL EUROPE text layer. 


1 Click the destinations_logo tab in the Timeline panel, and select the TRAVEL 
EUROPE layer. 


2 Move the current-time indicator to 1:10, which is the point at which you want 
the text to start fading in. 


Destinations destinations_logo = 


. rotated type 
. Globe logo 
x Crop area 


3 In the Effects & Presets panel, choose Animation Presets > Text > Blurs. 


4 Drag the Bullet Train animation preset onto the TRAVEL EUROPE layer in the 
Timeline panel or over the words Travel Europe in the Composition panel. Don’t 
worry about the text disappearing—you're looking at the first frame of 
the animation, which happens to be blank. 


Effects & Presets 
v* Animation Presets 
> B Backgrounds 
> E Behaviors 
> E Image - Creative 
> EE Image - Special Effects 
> Ml Image - Utilities 
> E Shapes 
> E Sound Effects 
> E Synthetics 
v Text 
> E 3D Text 
> B Animate In 
> E Animate Out 
vE Blurs 
& Blur By Word 
5 A 


Eð Evaporate 
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5 Click a blank area of the Timeline panel to deselect the TRAVEL EUROPE layer, 
and then drag the current-time indicator to 2:00 to manually preview the text 
animation. The text appears, letter by letter, until the words Travel Europe are 
fully onscreen at 2:00. 


ei Ẹi ei 


Precomposing layers for a new animation 


The travel show ID is coming along nicely, and you're probably eager to preview the 
complete animation. Before you do, however, you'll add a dissolve to all of the logo 
elements except the words Travel Europe. To do this, you need to precompose the 
other three layers of the destinations_logo composition: rotated type, Globe logo, 
and crop area. 


Precomposing is a way to nest layers within a composition. Precomposing moves the 
layers to a new composition, which takes the place of the selected layers. When you 
want to change the order in which layer components are rendered, precomposing 
is a quick way to create intermediate levels of nesting in an existing hierarchy. 


1 Shift-click to select the rotated type, Globe logo, and crop area layers in the 
destinations_logo Timeline panel. 


2 Choose Layer > Pre-compose. 


3 Inthe Pre-compose dialog box, name the new composition Dissolve_logo. Make 
sure the Move All Attributes Into The New Composition option is selected. Then 
click OK. 


destinations_logo = 


Pre-compose 
Layer Name 


T TRAVEL EUROPE 


destinations_logo = 


Layer Name De, 
T TRAVEL EUROPE Rily 
‘| [Dissolve_logo] al |/ 
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) Tip: To locate the 
Dissolve - Vapor preset 
quickly, type vap in the 
search box in the Effects 
& Presets panel. 


The three layers are replaced in the destinations_logo Timeline panel with a single 
layer, Dissolve_logo. This new, precomposed layer contains the three layers that 
you selected in step 1. You can apply the dissolve effect to it without affecting the 
TRAVEL EUROPE text layer and its Bullet Train animation. 


4 Make sure the Dissolve_logo layer is selected in the Timeline panel, and press 
the Home key or drag the current-time indicator to 0:00. 


5 Inthe Effects & Presets panel, choose Animation Presets > Transitions — 
Dissolves, and then drag the Dissolve — Vapor animation preset onto the 
Dissolve_logo layer in the Timeline panel or onto the Composition panel. 


oO Eff 
d a Dissolve_logo 
aa Dissolve Master Control 
Transition Completion 
(Box Blur) 


> © Blur Radius 


> © Iterations 


5) Blur Dimensions Horizontal and Vertical v 
E) Repeat Edge Pixels 


) Source Opacity 
5 Color 
> © Opacity 
5) Blending Mode 


The Dissolve — Vapor animation preset includes three components—a master 
dissolve, a box blur, and a solid composite, all of which appear in the Effect Controls 
panel. The default settings are fine for this project. 


6 Choose File > Save. 


Previewing the effects 


It’s time to preview all of the effects together. 


1 Click the Destinations tab in the Timeline panel to switch to the main composition. 
Press the Home key or drag the current-time indicator to make sure you're at 
the beginning of the time ruler. 


2 Make sure the Video switch (#) is selected for both layers in the Destinations 
Timeline panel. 
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3 Click the Play button (®) in the Preview panel, or press the spacebar, to watch 
the preview. Press the spacebar to stop playback at any time. 


Adding transparency 


Many TV stations display logos semitransparently in the corner of the frame to 
emphasize the brand. You'll reduce the opacity of the ID so that it can be used 
this way. 

1 Still in the Destinations Timeline panel, go to 2:24. 


2 Select the destinations_logo layer, and press T to display its Opacity property. 
By default, the Opacity is 100%—fully opaque. Click the stopwatch icon (6) 
to set an Opacity keyframe at this point in time. 


Destinations = 


F 
Opacity % 
m ParisRiver.jpg 


3 Press the End key or drag the current-time indicator to go to the end of the time 
ruler (2:29), and change the Opacity to 40%. After Effects adds a keyframe. 


Destinations = 


me + `‘ 
destinations logo + 
Opacity % 
E ParisRiver.jpg 
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® Note: For more 
about output formats 
and rendering, see 
Lesson 15, “Rendering 
and Outputting.” 


® Note: For output to 
final-delivery formats, 
you can use Adobe 
Media Encoder. You'll 
learn about Adobe 
Media Encoder in 
Lesson 15, “Rendering 
and Outputting.” 


P Tip: The keyboard 
shortcut for the 
Maximize Panel Group 
command is the accent 
grave character (`), 
which shares a key with 
the tilde character (~) . 


4 Click the Play button (P) in the Preview panel, press the spacebar, or press 0 on 
your numeric keypad to preview your composition. 


The logo appears, the words Travel Europe fly in, and it all fades to 40% opacity. 
5 Press the spacebar to stop playback when you're done. 


6 Choose File > Save to save your project. 


Rendering the composition 


You're ready to prepare your travel show ID for output. When you create output, 
the layers of a composition and each layer’s masks, effects, and properties are 
rendered frame by frame into one or more output files or, in the case of an image 
sequence, into a series of consecutive files. 


Making a movie from your final composition can take a few minutes or many hours, 
depending on the composition’s frame size, quality, complexity, and compression 
method. When you place your composition in the Render Queue, it becomes a render 
item that uses the render settings assigned to it. 


After Effects provides a variety of formats and compression types for rendering 
output; the format you choose depends on the medium from which you'll play 
your final output or on the requirements of your hardware, such as a video- 
editing system. 


You'll render and export the composition so that it can be broadcast on television. 


Click the Project tab to bring the Project panel forward. If the Project tab is not 
visible, choose Window > Project. 


2 Do one of the following to add the composition to the Render Queue: 


e Select the Destinations composition in the Project panel, and choose 
Composition > Add To Render Queue. The Render Queue panel 
opens automatically. 


e Choose Window > Render Queue to open the Render Queue panel, and then 
drag the Destinations composition from the Project panel onto the Render 
Queue panel. 


3 Double-click the Render Queue tab to maximize the panel so that it fills the 
application window. 
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Click the triangle to expand the Render Settings options. By default, After Effects 
renders compositions with Best Quality and Full Resolution. The default 
settings are fine for this project. 


Click the triangle to expand the Output Module options. By default, After Effects 
uses lossless compression to encode the rendered composition into a movie file, 
which is fine for this project. But you need to identify where to save the file. 


Click the blue words next to the Output To menu. 
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7 Inthe Output Movie To dialog box, accept the default movie name (Destinations), 
select the Lessons/Lesson02/Finished_Project folder for the location, and then 
click Save. 


8 Back in the Render Queue panel, click the Render button. 


After Effects displays a progress bar in the Render Queue panel as it encodes the file, 
and issues an audio alert when all items in the Render Queue have been rendered 
and encoded. 


9 When the movie is complete, double-click the Render Queue tab to restore 
your workspace. 


10 If you want to see your final product, double-click the Destinations.avi or 
Destinations.mov file in the Lessons/Lesson02/Finished_Project folder to open 
it in Windows Media Player or QuickTime, and then play the file. 


11 Save and close the project file, and then quit After Effects. 


Congratulations. You’ve created a travel show ID suitable for broadcast. 
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Review questions 


A WwW N 


How do you use Adobe Bridge to preview and import files? 
What is precomposing? 
How do you customize an effect? 


How do you modify the transparency of a layer in a composition? 


Review answers 


1 


Choose File > Browse In Bridge to jump from After Effects to Adobe Bridge. If Bridge 
isn't installed, you'll be prompted to download and install it. In Bridge, you can search 
for and preview image assets. When you locate the asset you want to use in an After 
Effects project, double-click it or drag it to the Project panel. 


Precomposing is a way to nest layers within a composition. Precomposing moves the 
layers to a new composition, which takes the place of the selected layers. When you 
want to change the order in which layer components are rendered, precomposing is 
a quick way to create intermediate levels of nesting in an existing hierarchy. 


After you apply an effect to a layer in a composition, you can customize its properties 
in the Effect Controls panel. This panel opens automatically when you apply the effect, 
or you can open it at any time by selecting the layer with the effect and choosing 
Window > Effect Controls. 


To modify the transparency of a layer, reduce its opacity. Select the layer in the Timeline 
panel, press T to reveal its Opacity property, and enter a value lower than 100%. 
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ANIMATING TEXT 


Lesson overview 

In this lesson, you'll learn how to do the following: 

e Create and animate text layers. 

e Stylize text using the Character and Paragraph panels. 
e Apply and customize text animation presets. 

e Preview animation presets in Adobe Bridge. 

e Install fonts using Adobe Fonts. 

e Animate text using keyframes. 

e Edit and animate imported Adobe Photoshop text. 


e Usea text animator group to animate selected characters 
ona layer. 


This lesson will take about two hours to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


Snorkel Tours 


Q 


y% baT i %4 


p 


ee a 
Sars 


RDE RY 


PROVIDING EXCURSIONS DAILY 


PROJECT: CORPORATE ADVERTISEMENT 


Your type doesn't need to sit still while your audience 
is reading it. In this lesson, you'll learn several ways 
to animate type in After Effects, including timesaving 
methods unique to text layers. 


Getting started 


Adobe After Effects offers many ways to animate text. You can animate text layers by 
manually creating keyframes in the Timeline panel, using animation presets, or using 
expressions. You can even animate individual characters or words in a text layer. 

In this lesson, you'll employ several different animation techniques, including some 
that are unique to text, while you design a promotion for snorkeling tours from the 
fictional Blue Crab Charters company. You'll also take advantage of Adobe Fonts to 
install a font for use in your project. 


As in other projects, you'll begin by previewing the movie you're creating, and then 
you'll open After Effects. 


1 Make sure the following files are in the Lessons/Lesson03 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: BlueCrabLogo.psd, FishSwim.mov, LOCATION.psd 
e Inthe Sample_Movies folder: Lesson03.mov, Lesson03.avi 


2 Open and play the Lesson03.avi sample movie in Windows Movies & TV or 
the Lesson03.mov sample movie in QuickTime Player to see what you will 
create in this lesson. When you are done, close Windows Movies & TV or 
QuickTime Player. You may delete the sample movies from your hard disk if you 
have limited storage space. 


As you start the application, restore the default settings for After Effects. See 
“Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. 


4 Click New Project in the Home window. 
After Effects opens to display a blank, untitled project. 


5 Choose File > Save As > Save As, and navigate to the Lessons/Lesson03/ 
Finished_Project folder. 


6 Name the project Lesson03_Finished.aep, and then click Save. 
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Creating the composition 
First, you'll import footage and create the composition. 


1 Click the New Composition From Footage button in the Composition panel 
to create a new composition. 


n (none) 


N 


New Composition New Composition 
From Footage 


2 Navigate to the Lessons/Lesson03/Assets folder on your hard disk, select 
FishSwim.mov, and then click Import or Open. 


FishSwim 


0:00:00:00 


> + Source Name 


E EREN Fishsvimmov P 
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After Effects can import several file formats, including Adobe Photoshop and Adobe 
Illustrator files as well as QuickTime and AVI movies. This makes After Effects an 
incredibly powerful application for compositing and motion graphics work. 


3 Choose File > Save. 


You're ready to add the title text to the composition. 


About text layers 


In After Effects, you can add text with flexibility and precision. The Tools, 
Character, and Paragraph panels contain a wide range of text controls. You can 
create and edit horizontal or vertical text directly on the screen in the Composition 
panel, and quickly change the font, style, size, and color of the text. You can apply 
changes to individual characters and set formatting options for entire paragraphs, 
including alignment, justification, and word-wrapping. In addition to all of these 
style features, After Effects provides tools for easily animating specific characters 
and properties, such as text opacity and hue. 


After Effects uses two types of text: point text and paragraph text. Use point text to 
enter a single word or line of characters; use paragraph text to enter and format text 
as one or more paragraphs. 


In many ways, text layers are just like any other layers in After Effects. You can apply 
effects and expressions to text layers, animate them, designate them as 3D layers, 
and edit the 3D text while viewing from multiple angles. As with layers imported 
from Illustrator, text layers are continuously rasterized, so when you scale the layer 
or resize the text, it retains crisp, resolution-independent edges. The two main dif- 
ferences between text layers and other layers are that you cannot open a text layer 

in its own Layer panel and you can animate the text in a text layer using special text- 
animator properties and selectors. 


Installing a font using Adobe Fonts 


Hundreds of fonts are available through Adobe Fonts, which is included with an 
Adobe Creative Cloud membership. You'll use Adobe Fonts to install a font that will 
work well for the title text. When you install an Adobe Fonts font on your system, 
it’s available in any application. 


1 Choose File > Add Fonts From Adobe. 
After Effects opens the Adobe Fonts page in your default browser. 


2 Make sure you're signed in to Creative Cloud. If not, click Sign In at the top 
of the screen, and then enter your Adobe ID. 
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3 Type Snorkel Tours in the sample text field, and move the slider to decrease 


the sample text size so you can see the full title. 


Adobe Fonts 


hes SNORKEL TOURS SMORKEL 
Lopate TOURS 


Farmband The Tipatece Series 


My Adobe Fonts 


Snorkel 
Tours 


Odisseia 


Using your own text as the sample text lets you get a feel for how a font will work 


in your project. 


You can browse fonts on the Adobe Fonts website, but because there are so many, 
it’s often more efficient to filter them or to search for a specific font. You'll filter 


fonts to see those that meet your requirements. 


4 Choose Name from the Sort menu in the upper right corner. Then, on the left 
side of the page, select Sans Serif in the Classification area. In the Properties 
area, select the buttons for medium weight, medium width, medium x-height, 


low contrast, and standard capitalization. 


Clear Filters Hide Filters 


Snorkel Snorkel 
Tours 


Acumin 


Snorkel Snorkel 
Tours Tours 


Aller Altivo 


Snorkel Tours 


Agency Fa 


Font Bureau 


Snorkel Tours 
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Adobe Fonts displays several fonts that meet the requirements you specified. 


5 


Browse a few pages’ worth of fonts to see what’s available. Calluna Sans, which 
is probably on the second page, will work nicely. 


Click Calluna Sans. 


Snorkel Tours 


Calibri Calling Code 
Monotype Dharma Type 
6 fonts 2 fonts 


Snorkel 


3 4 5 6 12 Next 


Snorkel Tours 


Wr 


Calluna Sans 


exljbris Font Foundry 
4 fonts 


View Family 


Adobe Fonts displays sample text for all the fonts in the selected family as well 
as additional information about the font. 


@ Note: Depending 7 
on your system and your 


Click Activate Font next to the Regular and Bold versions of the font. 


Internet connection, it 
may take a few minutes 
for Adobe Fonts to 
activate your fonts. 


Calluna Sans 


Designed by Jos Buivenga. Fram exljbris Font Foundry. 


The quick brown fox jumps over the lazy dog y o 


The quick brown The quick brown The quick brown The quick brown 
fox jumps over fox jumps over the fox jumps over fox jumps over the 
the lazy dog lazy dog the lazy dog lazy dog 

The quick brown The quick brown The quick brown The quick brown 
fox jumps over fox jumps over the fox jumps over fox jumps over 
the lazy dog lazy dog the lazy dog the lazy dog 


Ca atiae (C) 


Activate font (C) 
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The selected fonts are automatically added to your system and are then available 
in any application, including After Effects. After you've activated your fonts, you 
can close Adobe Fonts and your browser. 


Creating and formatting point text 


When you enter point text in After Effects, each line of text is independent—the 
length of a line increases or decreases as you edit the text, but it doesn’t wrap to 
the next line. The text you enter appears in a new text layer. The small line through 
the I-beam marks the position of the text baseline. 


1 Inthe Tools panel, select the Horizontal Type tool (T). 


2 Click anywhere in the Composition panel, and type Snorkel Tours. Then exit 
text-editing mode by pressing Enter on the numeric keypad or selecting the layer 
name in the Timeline panel. The text layer is selected in the Composition panel. 


Using the Character panel 


The Character panel provides options for formatting characters. If text is high- 
lighted, changes you make in the Character panel affect only the highlighted text. 
If no text is highlighted, changes you make in the Character panel affect the selected 
text layers and the text layers’ selected Source Text keyframes, if any exist. If no text 
is highlighted and no text layers are selected, changes you make in the Character 
panel become the defaults for the next text entry. 


After Effects displays sample text for each font. You can filter fonts to display only 
fonts from Adobe or favorites you’ve marked. 


1 Select the Snorkel Tours text layer in the Timeline panel. 

2 Inthe Character panel, choose Calluna Sans Bold from the Font Family menu. 
3 Set the Font Size to 90 pixels, and make sure no stroke is selected. 
4 


Leave all other options at their default settings. 


Snorket Tours 


® Note: If you press 
Enter or Return on 

the regular keyboard 
instead of on the 
numeric keypad, you'll 
begin a new paragraph. 


P Tip: To open the 
panels individually, 
choose Window > 
Character or Window > 
Paragraph. To open 

both panels, select the 
Horizontal Type tool, and 
then click the Toggle 
The Character And 
Paragraph Panels button 
in the Tools panel. 


Ð Tip: To select a font 
quickly, begin typing its 
name in the Font Family 
box. The Font Family 
menu jumps to the first 
font on your system 
that matches the letters 
you've typed. If a type 
layer is selected, the 
text in the Composition 
panel is formatted with 
the newly selected font. 
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® Note: Your screen 
may look different, 
depending on where 
you started typing. 


Using the Paragraph panel 


Use the Paragraph panel to set options that apply to an entire paragraph, such 

as alignment, indentation, and leading. For point text, each line is a separate 
paragraph. You can use the Paragraph panel to set formatting options for a single 
paragraph, multiple paragraphs, or all paragraphs in a text layer. You just need 

to make one adjustment in the Paragraph panel for this composition’s title text. 


1 Inthe Paragraph panel, click the Center Text button. This aligns horizontal 
text to the center of the layer, not to the center of the composition. 


= —_—_ 


Paragraph 


2 Leave all other options at their default settings. 


Positioning the type 


To precisely position layers, such as the text layer you're working on now, you 
can display rulers, guides, and grids in the Composition panel. These visual refer- 
ence tools don’t appear in the final rendered movie. 


1 Make sure the Snorkel Tours text layer is selected in the Timeline panel. 


2 Choose Layer > Transform > Fit To Comp Width. This scales the layer 
to fit to the width of the composition. 


FishSwim 


FE Snorkel Tours E 


> 2 © FishSwim.mov 


Now you can position the text layer using a grid. 
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3 Choose View > Show Grid and then View > Snap To Grid. 


4 Using the Selection tool (), drag the text up in the Composition panel until the 
text is in the top quarter of the composition, centered in the surface of the water. 
Press Shift after you start dragging to constrain the movement and help you 


position the text. 


5 When the layer is in position, choose View > Show Grid again to hide the grid. 


This project isn’t destined for broadcast TV, so it’s okay that the title extends 
beyond the title-safe and action-safe areas of the composition at the beginning 
of the animation. 


6 Choose File > Save to save your project. 


Animating with scale keyframes 


The text layer was scaled to nearly 250% when you applied the Fit To Comp Width 
command to it earlier in this lesson. Now, you'll animate the layer’s scale so that 
the type gradually shrinks down to 200%. 


1 Inthe Timeline panel, move the current-time indicator to 3:00. 


2 Select the Snorkel Tours text layer, and press the S key to reveal the layer’s 
Scale property. 


3 Click the stopwatch icon (6) to add a Scale keyframe at the current time (3:00). 


I [Snorkel Tours F 
Scale 
D FishSwim.mov 
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4 Move the current-time indicator to 5:00. 


5 Reduce the layer’s Scale values to 200, 200%. After Effects adds a new Scale 
keyframe at the current time. 


— 
= - 
— 


Snorkel Tours 


FishSwim 


urce Name + 
T [Snorkel Tours F 
Scale 
© FishSwim.mov 


Previewing a range of frames 


Now, you'll preview the animation. Although the composition is 13 seconds 
long, you need to preview only the first five seconds, since that is where the text 
animation occurs. 


1 Move the current-time indicator to 5:10, and press N to set the end of the work 
area. The scale animation ends shortly before 5:10. 


Soure 


T {Snorkel Tours F 
Scale 
© FishSwim.mov 


2 Press the spacebar to preview the animation from 0:00 to 5:10. The movie title 
scales to a smaller size. 


= ee = 
Snorkel Tours Snorkel Toursi Snorkel Tours 


3 Press the spacebar to stop playback after you’ve viewed the animation. 


Adding Easy Ease 


The beginning and end of the scale animation are rather abrupt. In nature, nothing 
comes to an absolute stop. Instead, objects ease into and out of starting and 
stopping points. You'll apply Easy Ease to make the animation smoother. 
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1 Right-click (Windows) or Control-click (macOS) the Scale keyframe at 3:00, 
and choose Keyframe Assistant > Easy Ease Out. The keyframe becomes a left- 
pointing icon. 


2 Right-click (Windows) or Control-click (macOS) the Scale keyframe at 5:00, 
and choose Keyframe Assistant > Easy Ease In. The keyframe becomes a right- 
pointing icon. 


FishSwim 


ope fh De Source Name 


{v 1 T [Snorkel Tours p 
lv Scale - 
>m2 © FishSwim.mov 


3 Watch another preview. Press the spacebar to stop it when you're done. 


4 Hide the Scale property, and then choose File > Save. 


Using a text animation preset 


Currently, the title appears when the video begins. You'll animate the title to make its 
arrival more interesting. The easiest way to do that is to use one of the many anima- 
tion presets that come with After Effects. After applying an animation preset, you 
can customize it and save it to use again in other projects. 


1 Press the Home key or go to 0:00 to make sure the current-time indicator is at the 
beginning of the time ruler. 


After Effects applies animation presets from the current time. 


2 Select the Snorkel Tours text layer. 


Browsing animation presets 


You already applied an animation preset using the Effects & Presets panel 

in Lesson 2, “Creating a Basic Animation Using Effects and Presets.’ But what if 
you're not sure which animation preset you want to use? To help you choose the 
right animation preset for your projects, you can preview presets in Adobe Bridge. 


1 Choose Animation > Browse Presets. Adobe Bridge opens, displaying the contents 
of the After Effects Presets folder. 


2 Inthe Content panel, double-click the Text folder, and then the Organic folder. 


© Note: If Bridge 
isn't installed, you'll 


be prompted to install 


it when you choose 
Browse Presets. 


For more information, 


see page 2. 
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3 Click to select the first preset, Autumn. Adobe Bridge plays a sample 
of the animation in the Preview panel. 


4 Select a few other presets, and watch them in the Preview panel. 


5 Preview the Ripple preset, and then double-click its thumbnail preview. 
Alternatively, you can right-click (Windows) or Control-click (macOS) 
the thumbnail and choose Place In Adobe After Effects 2020. 


Content 


rubbel fh, h. 


Ripple.ffx Rubber Floor.ffx Rubber.ffx 


6 Return to After Effects, but leave Adobe Bridge open in the background. 


After Effects applies the preset to the selected layer, which is the Snorkel Tours layer, 
but the layer no longer appears in the composition. This is because at 0:00, the first 
frame of the animation, the letters haven't yet rippled into the scene. 


Customizing an animation preset 


After you apply an animation preset to a layer, all of its properties and keyframes 
are listed in the Timeline panel. You'll use those properties to customize the preset. 


1 Press the spacebar to watch a preview of the animation. The letters flip into 
place, and then the entire title scales down to 200%. Press the spacebar again 
to stop the preview. 


= - 


Snorkel Tours 
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The letters appear to ripple into the background. It looks great—but you'll customize 
the preset to change the way the letters appear. 


2 Select the Snorkel Tours text 
layer in the Timeline panel, 


FishSwim 


and then expand the layer’s = 
properties. Navigate to the — 
Text > Animator - Ripple 1 
(Skew) > Selector Offset > 


Advanced properties. 


3 Click Off next to Randomize 
Order to turn it On. 


The Randomize Order property 


changes the order in which letters - more 
appear on the screen as they ripple Mode Add 


+ % 
into place. Ramp Up 


% 


% 


tase low U% 
Randomize Order 


4 Drag the current-time indicator from 0:00 to 3:00 to manually preview the anima- 
tion you edited. 


5 Hide the layer’s properties. 


6 Press the End key to move the current-time indicator to the end of the time ruler, 
and then press N to set the end bracket of the work area. 


7 Press the Home key or go to 0:00 to return the current-time indicator to the begin- 
ning of the time ruler. 


8 Choose File > Save to save your project. 
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Animating imported Photoshop text 


When you just need to add a few words of text to a unique project, it works well to 
type directly into After Effects. But in the real world, you may need to ensure brand 
and style consistency among multiple projects. Fortunately, you can import text 
from Photoshop or Illustrator. You can preserve text layers, edit them, and animate 
them in After Effects. 


Importing text 


Some of the remaining text for this composition is in a layered Photoshop file, which 
you'll import now. 


1 Click the Project tab to bring the Project panel forward, and then double-click 
an empty area in the Project panel to open the Import File dialog box. 


2 Select the LOCATION.psd file in the Lessons/Lesson03/Assets folder. Choose 
Composition — Retain Layer Sizes from the Import As menu. (In macOS, 
you may need to click Options to see the Import As menu.) Then click Import 
or Open. 


3 Inthe LOCATION.psd dialog box, LOCATION. ps¢ 
select Editable Layer Styles, and Composition - Retain Layer Sizes 
click OK. 


After Effects can import Photoshop layer 
styles, retaining the appearance of the layers 
youre importing. The imported file is added 
as a composition to the Project panel; its 
layers are added in a separate folder. 


4 Drag the LOCATION composition from the Project panel into the Timeline 
panel, placing it at the top of the layer stack. 


T Snorkel Tours 


Q FishSwim.mov 
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Because you imported the LOCATION. psd file as a composition with layers intact, 
you can work on it in its own Timeline panel, editing and animating its layers 
independently. 


Editing imported text 


The text you imported isn’t currently editable in After Effects. You'll change that 
so that you can control the type and apply animations. The LOCATION. psd file is 

a boilerplate template for the location of company tours. You'll edit the text and add 
a stroke to help it stand out for this promotion. 


1 Double-click the LOCATION composition in the Project panel to open it in its 
own Timeline panel. 


2 Select the LOCATION layer in the Timeline panel, and choose Layer > Create > 
Convert To Editable Text. (Click OK if you see a warning about missing fonts.) 


LOCATION 


Layer Name 


Now the text layer can be edited, so you can customize the tour location. 


3 Double-click the LOCATION layer in the Timeline panel to select the text 
and automatically switch to the Horizontal Type tool (T). 


4 Type ISLA MUJERES. 


5 Switch to the Selection tool (>) to exit text-editing mode. 


6 Ifthe Character panel isn’t open, choose Window > Character to open it. 


7 Click the Stroke color box, select a teal blue color (we used R=70, G=92, B=101), 


and click OK. Leave all other settings as they are. 


m 


| Character 


Impact 


Regular 


8 Choose File > Save to save your work so far. 


@ Note: The layer name 
does not change in the 
Timeline panel when 
you change the text in 
the layer. This is because 
the original layer 

name was created in 
Photoshop. To change 

a layer’s name, select it 
in the Timeline panel, 
press Enter or Return, 
type the new name, 

and press Enter or 
Return again. 
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® Note: The Raining 
Characters In preset 
changes the color of the 
text, which is fine for 
this project. 


Animating the location text 


You want the letters of the location—/JSLA MUJERES—to flow organically onto 
the screen under the activity title. The easiest way to do this is to use another text 
animation preset. 


1 Go to 5:00 in the timeline. At that point, the title has finished scaling to its 
final size. 


2 Select the LOCATION layer in the Timeline panel. 


3 Press Ctrl+Alt+Shift+O (Windows) or Command+Option+Shift+O (macOS) 
to jump to Adobe Bridge. 


4 Navigate to the Presets/Text/Animate In folder. 


5 Select the Raining Characters In animation preset, and watch it in the Preview 
panel. This effect works well to reveal the text gradually. 


6 Double-click the Raining Characters In preset to apply it to the LOCATION 
layer, and then return to After Effects. 


7 With the LOCATION layer selected in the Timeline panel, press UU to see 
the properties modified by the animation preset. You should see two keyframes 
for Range Selector 1 Offset: one at 5:00 and one at 7:15. 


LOCATION 


Animate: O 
Z) Source Text 
~ Animator 1 Add: O 
v Range Selector 1 


Z Offset 


The U key, sometimes referred to as the Uberkey, is a valuable keyboard shortcut 
that reveals all the animated properties of a layer. Press it once to see the animated 
properties; press it twice to view all modified properties. 


You have a lot of animation to fit into this composition, so you'll speed up the effect. 
8 Go to 6:00, and then drag the second Range Selector 1 Offset keyframe to 6:00. 
9 Select the LOCATION layer, and press U to hide the modified properties. 


LOCATION 


T [LOCATION P 


v Text Animate: O 


>) Source Text 
~ Animator 1 Add: O 
v Range Selector 1 


Offset 
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10 Select the FishSwim tab in the Timeline panel to make that timeline active, 
and then go to 6:00. 


11 Use the Selection tool (»}) to move the LOCATION layer so that ISLA MUJERES 
is right-aligned with and just below Snorkel Tours. 


12 Deselect all layers. Drag the current-time indicator across the time ruler from 
4:00 to 6:00 to see the letters fall into place. Then save your work so far. 


— = —— 


Snorkel Tours Snorkel Tours 


Snorkel Tours 3 


Animating type tracking 


Next, you'll add the company name and then animate its appearance using a text 
animation tracking preset. By animating tracking, you can make words seem 
to expand outward as they appear onscreen from a central point. 


Applying a tracking preset 
First you'll create the text, and then you'll add a tracking preset. 
1 Select the Horizontal Type tool (T), and then type BLUE CRAB CHARTERS. 


2 Select the BLUE CRAB CHARTERS layer. In the Character panel, choose Times 
New Roman Bold from the Font Family menu, choose 48 px from the Font Size 
menu, set the fill to white, and set the stroke to none. In the Paragraph panel, 
make sure Center Text is selected. 


3 Goto 7:10. 


4 Use the Selection tool (»}) to move the BLUE CRAB CHARTERS layer down to 
the lower third of the screen, aligned with Snorkel Tours, as in the image below. 


Snorkel Tours Character 


= Times New Roman ~ 


a 4 

LA 

Bold = z | 
T’ ¢ 7 At v 


LUE CRAP CHARTER! 


5 Type Increase Tracking in the search box of the Effects & Presets panel. Then 
double-click the preset to apply it to the BLUE CRAB CHARTERS layer. 
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6 Drag the current-time indicator across the time ruler between 7:10 and 9:10 
to manually preview the tracking animation. 


Customizing the tracking animation preset 


The text expands, but you want the letters to be so close initially that they’re nearly on 
top of each other, and then to expand to a reasonable, readable distance apart. The 
animation should also occur more quickly. You'll adjust the Tracking Amount to 
achieve both goals. 


1 Select the BLUE CRAB CHARTERS layer in the Timeline panel, and press UU 
to reveal the properties that were modified. 


2 Goto7:10. 


3 Under Animator 1, change the Tracking Amount to -5 so that the letters are 
squeezed together. 


Snorkel Tours 


BLUE CRAB CHARTERS | 4 


BAUR ORAP CHARTERS 


ator 1 


Tracking Amount 


4 Click the Go To Next Keyframe arrow (>) for the Tracking Amount property, 
and then change the value to 0. 


— o 


pona i 8 Snorkel Tours 


l [BLUE CRAB CHARTERS | F 


Text LUE CRABCHARTER! 


Source Text 
v Animator 1 


Tracking Amount 


5 Drag the current-time indicator across the time ruler between 7:10 and 8:10. 
The letters expand, and stop animating at the last keyframe. 
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Animating text opacity 

You'll take the animation of the company name a little further by having it fade 
onscreen as the letters expand. To do this, you'll animate the layer’s Opacity property. 
1 Make sure the BLUE CRAB CHARTERS layer is selected. 

2 Press T to reveal only the layer’s Opacity property. 


3 Go to 7:10, and set the Opacity to 0%. Then click the stopwatch icon (ð) 
to set an Opacity keyframe. 


4 Go to 7:20, and set the Opacity to 100%. After Effects adds a second keyframe. 
Now the letters of the company name will fade in as they expand onscreen. 


5 Drag the current-time indicator across the time ruler between 7:10 and 8:10 


to see the letters of the company fade in as they spread out. 


6 Right-click (Windows) or Control-click (macOS) the ending Opacity keyframe, 
and choose Keyframe Assistant > Easy Ease In. 


7 Choose File > Save. 


Animating an image to replace text 


You've used several animation presets to change the way text appears onscreen. 
Now you'll use one to make text disappear. You'll import a logo, and animate 
it to swoop in and appear to erase the BLUE CRAB CHARTERS text, replacing it. 


Animating an imported image 
First you'll import the logo and animate its position. 


1 Click the Project tab to bring the Project panel forward, and then double-click 
an empty area in the Project panel to open the Import File dialog box. 


2 Select the BlueCrabLogo.psd file in the Lessons/Lesson03/Assets folder. Choose 
Composition — Retain Layer Sizes from the Import As menu. (In macOS, 
you may need to click Options to see the Import As menu.) Then click Import 
or Open. 


3 Inthe BlueCrabLogo.psd dialog box, select Editable Layer Styles, and click OK. 
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4 Drag the BlueCrabLogo composition into the Timeline panel, placing it at the 
top of the layer stack. 


The logo is centered on the screen, but you want it to enter from the left and move 
down to replace Blue Crab Charters. You'll animate the layer’s Position and Scale 
properties to do that. 


5 With the BlueCrabLogo layer selected, press P to reveal its Position property. 
Then press Shift+S to reveal the Scale property as well. 


6 Move the current-time indicator to 10:00. 


7 Change the Position values to —810, 122, and the Scale to 25%. Then click 
the stopwatch (6) next to each property to create initial keyframes. 


Snorkel Tours 


FishSwim 


BLUE CRAB CHARTERS 


8 Go to 11:00, and change the Position to 377, 663, and the Scale to 85%. 
After Effects creates keyframes for the properties. 


Snorkel Tours 


FishSwim 
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The logo moves into position, but you want it to swoop in, rather than moving 
in a straight line. You'll add some intermediate Position keyframes. 


9 Go to 10:15, and change the Position to 139, 633. 
10 Go to 10:30, and change the Position to 675, 633. 
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11 Go to 10:00, and press the spacebar to preview the animation. Press the spacebar 
again to stop the preview, and then hide the layer properties. 


Applying an animation preset 

The logo swoops in. Now you'll apply an animation preset to make it appear that 
the logo is erasing the text as it arrives. 

1 Go to 10:10, and select the BLUE CRAB CHARTERS layer. 

2 Inthe Effects & Presets panel, search for Fade Out By Character. 

3 Double-click the Fade Out By Character preset to apply it to the layer. 


4 With the BLUE CRAB CHARTERS layer selected, press U to see its animated 
properties. 


5 Go to 10:12. 
6 Move the first Range Selector 1: Start keyframe to 10:12. 


FishSwim 


E} BlueCrabLogo F 
l F 
Tracking Amount 
v Range Selector 1 
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Source Nam 
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8 Press the spacebar to preview your project, and then press the spacebar again 
to stop the preview. 


9 Press U to hide the layer properties, and save your work. 


Using a text animator group 


Text animator groups let you animate individual letters within a block of text 

in a layer. You'll use a text animator group to draw attention to BLUE CRAB 
CHARTERS, animating only the characters in the middle word without affecting 
the tracking and opacity animation of the other characters in the layer. 


1 Inthe Timeline panel, go to 9:10. 
2 Expand the BLUE CRAB CHARTERS layer to see its Text property group name. 


3 Select the BLUE CRAB CHARTERS layer, and make sure only the layer name 
is selected. 


4 Next to the Text property group name, click the Animate pop-up menu, and 
choose Skew. 


After Effects adds a property group STEFA 


named Animator 3 to the layer’s Text 
properties. 


5 Select Animator 3, press Enter iL E MUOCTSDLOES : 
o l F 


or Return, and rename it Skew 
Animator. Then press Enter or 
Return again to accept the new 
name. 


Now youre ready to define the range 
of letters that you want to skew. 


6 Expand the Skew Animator’s Range Selector 1 properties. 
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Each animator group includes a default range selector. Range selectors constrain the 
animation to particular letters in the text layer. You can add additional selectors to 
an animator group, or apply multiple animator properties to the same range selector. 


7 While watching the Composition panel, drag the Skew Animator’s Range 
Selector 1 Start value up (to the right) until the left selector indicator (}) is just 
before the Cin CRAB. 


8 Drag the Skew Animator’s Range Selector 1 End value down (to the left) until 
its indicator (\) is just after the B in CRAB in the Composition panel. 


une 


RAB CHARTERS BLUE CRA )CHARTERS 
g 


Now, any properties that you animate with the Skew Animator will affect only 
the characters that you selected. 


About text animator groups 


A text animator group includes one or more selectors and one or more 
animator properties. A selector is like a mask—it specifies which characters or 
section of a text layer you want an animator property to affect. Using a selector, 
you can define a percentage of the text, specific characters in the text, or a specific 
range of text. 


Using a combination of animator properties and selectors, you can create 
complex text animations that would otherwise require painstaking keyframing. 
Most text animations require you to animate only the selector values, not the 
property values. Consequently, text animators use a small number of keyframes 
even for complex animations. 


For more information about text animator groups, see After Effects Help. 
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Skewing the range of text 
Now, you'll make that middle word shake and shimmy by setting Skew keyframes. 


1 Drag the Skew Animator’s Skew value left and right, and notice that only 
the selected word sways. The other words in the line of text remain steady. 


2 Set the Skew Animator’s Skew value to 0. 


3 Go to 9:15, and click the stopwatch icon (6) for Skew to add a keyframe 
to the property. 


FishSwim 
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l [BLUE CRAB CHARTERS | $ 


BLUE CRAB CHARTERS 
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BLUE C¥/4CHARTERS 


5 Go to 9:25, and change the Skew value to -50. After Effects adds another 
keyframe. 


6 Go to 10:00, and change the Skew value to 0 to set the final keyframe. 


LESSON 3 Animating Text 


7 Click the Skew property name to select all of the Skew keyframes. Then 
choose Animation > Keyframe Assistant > Easy Ease to add an Easy Ease 
to all keyframes. 


8 Hide the properties for the BLUE CRAB CHARTERS layer in the Timeline panel. > Tip: To quickly 
remove all text 
animators from a text 

— layer, select the layer in 


Snorkeltfours 


9 Press Home, or go to 0:00, and then preview the entire composition. 


the Timeline panel, and 
choose Animation > 
Remove All Text 
Animators. To remove 
only one animator, 
select its name in the 
Timeline panel, and 
press Delete. 


= — 
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10 Press the spacebar to stop playback, and then choose File > Save to save 
your work. 


Animating a layer’s position 


You've used several text animation presets to dazzle your audience. For a simpler 
effect, you can animate the Transform properties for a text layer, just as you can any 
other layer. 


Currently, the company logo appears onscreen, but there’s no context for it. You'll 
add the words “Providing Excursions Daily,’ animating them so that they move into 
position as the company name is appearing onscreen. 

1 Inthe FishSwim Timeline panel, go to 11:30. 
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> Tip: To make sure 
no layers are selected, 
click an empty area 

in the Timeline panel, 
press F2, or choose 
Edit > Deselect All. 


At this point, all the other text is onscreen, so you can position the “Providing 
Excursions Daily” line accurately. 


2 Select the Horizontal Type tool (T). 


3 Make sure no layers are selected, and then click in the Composition panel. Make 
sure you're clicking in an area that doesn’t overlap an existing text layer. 


4 Type Providing Excursions Daily. 


5 Select the Providing Excursions Daily layer. Then, in the Character panel, choose 
Calluna Sans Bold from the Font Family menu. Set the Font Size to 48 px. 


a 


In the Character panel, make sure the Fill Color box is set to white. 


7 Select Small Caps. Leave all other options at their default settings. 


8 Select the Selection tool (»), and then drag the Providing Excursions Daily layer 
so that the text is aligned with the bottom of the logo and the right edge of 
Snorkel Tours. 


9 Press P to display the layer’s Position property. Click the stopwatch icon (6) 
to create an initial keyframe for the layer. 
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10 Go to 11:00, the point where the logo has replaced the company name. 
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11 Drag the Providing Excursions Daily layer off the right edge of the Composition 
window. Press the Shift key as you drag to create a straight path. 


Snorkel Tours 
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12 Preview the animation, and then hide the Position property. 
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It’s simple, but effective. The text moves in from the right side and stops in its final 
position beside the logo. 


Adding motion blur 


Motion blur is the blur that occurs as an object moves. You'll apply motion blur 
to finesse the composition and make the movement look more natural. 


1 Inthe Timeline panel, click the Motion Blur switch (®) for each layer except 
the FishSwim and LOCATION layers. 


FishSwim 
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Now you'll apply motion blur to the layers in the LOCATION composition. 
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2 Switch to the LOCATION Timeline panel, and enable motion blur for the layer. 


LOCATION 


0:00:11:30 


1 I LOCATION 


ea > > Layer Name 


3 Switch back to the FishSwim Timeline panel, and select the Motion Blur 
switch for the LOCATION layer. 


After Effects automatically enables motion blur for the composition when you 
enable it for any layer. 
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5 Choose File > Save. 


Give yourself a pat on the back. You just completed some hard-core text animations. 
If you'd like to export the composition as a movie file, see Lesson 15, “Rendering and 
Outputting,’ for instructions. 
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Review questions 


1 What are some similarities and differences between text layers and other types 
of layers in After Effects? 


2 How can you preview a text animation preset? 


3 What are text animator groups? 


Review answers 


1 In many ways, a text layer is just like any other layer in After Effects. You can apply 
effects and expressions to text layers, animate them, designate them as 3D layers, and 
edit 3D text while viewing it in multiple views. However, they differ from most layers 
in that you can’t open text layers in their own Layer panels. Text layers consist entirely 
of vector graphics, so when you scale the layer or resize the text, it retains crisp, 
resolution-independent edges. You can animate the text in a text layer using special text 
animator properties and selectors. 


2 You can preview text animation presets in Adobe Bridge by choosing Animation > 
Browse Presets. Adobe Bridge opens and displays the contents of the After Effects 
Presets folder. Navigate to folders containing categories of text animation presets, 
such as Blurs or Paths, and watch samples in the Preview panel. 


3 Text animator groups enable you to animate the properties of individual characters 
in a text layer over time. Text animator groups contain one or more selectors, which are 
like masks: They let you specify which characters or section of a text layer you want 
an animator property to affect. Using a selector, you can define a percentage of the 
text, specific characters in the text, or a specific range of text. 
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WORKING WITH SHAPE LAYERS 


Lesson overview 


In this lesson, you'll learn how to do the following: 


Create custom shapes. 

Customize a shape’s fill and stroke. 

Use path operations to transform shapes. 
Animate shapes. 

Snap layers into alignment. 


Use the Create Nulls From Paths panel. 


This lesson will take about an hour to complete. If you haven't already done 


so, download the project files for this lesson from www.adobepress.com/ 
AfterEffectsCIB2020, following the instructions in the Getting Started 
section under “Accessing the lesson files and Web Edition” 


PROJECT: ANIMATED ILLUSTRATION 


Shape layers make it easy to create expressive 
backgrounds and intriguing results. You can animate 
shapes, apply animation presets, and connect them to 
other shapes to intensify their impact. 


Getting started 


Shape layers are created automatically when you draw a shape with any of the 
drawing tools. You can customize and transform an individual shape or its entire 
layer to create interesting results. In this lesson, you will use shape layers to create 
a whimsical animation. 


First, you'll preview the final movie and set up the project. 


1 Make sure the following files are in the Lessons/Lesson04 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: Background.mov 
e Inthe Sample_Movies folder: Lesson04.avi, Lesson04.mov 


2 Open and play the Lesson04.avi sample movie in Windows Movies & TV or 
the Lesson04.mov sample movie in QuickTime Player to see what you will 
create in this lesson. When you are done, close Windows Movies & TV or 
QuickTime Player. You may delete the sample movies from your hard disk if you 
have limited storage space. 


As you start After Effects, restore the default application settings. See “Restoring 
default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. 


4 Click New Project in the Home window. 
After Effects opens to display a blank, untitled project. 


5 Choose File > Save As > Save As, and then navigate to the Lessons/Lesson04/ 
Finished_Project folder. 


6 Name the project Lesson04_Finished.aep, and then click Save. 


Creating the composition 


Next, you'll import the background movie and create the composition. 
1 Click New Composition From Footage in the Composition panel. 


2 Navigate to the Lessons/Lesson04/Assets folder on your hard disk, select the 
Background.mov file, and then click Import or Open. 
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After Effects adds the Background.mov file to the Project panel, creates a composi- 
tion based on the Background.mov file, and opens the new composition in both the 
Timeline and Composition panels. 


3 Press the spacebar to preview the background movie. In the scene, night turns 
to day as the sky lightens and the colors brighten. Press the spacebar again to 


stop playback. 


Adding a shape layer 


After Effects includes five shape tools: Rectangle, Rounded Rectangle, Ellipse, Polygon, 
and Star. When you draw a shape directly in the Composition panel, After Effects adds 
a new shape layer to the composition. You can apply stroke and fill settings to a shape, 
modify its path, and apply animation presets. Shape attributes are all represented in the 
Timeline panel, and you can animate each setting over time. 


The same drawing tools can create both shapes and masks. Masks are applied to 
layers to hide or reveal areas or as input into effects; shapes have their own layers. 
When you select a drawing tool, you can specify whether the tool draws a shape 
or a mask. 


Drawing a shape 
You'll begin by drawing a star. 


1 Press the Home key or move the current-time indicator to the beginning of the 
time ruler. 


2 Press F2 or click an empty area in the Timeline panel to make sure no layers 
are selected. 


If you draw a shape when a layer is selected, the shape becomes a mask for that layer. 
If you draw a shape when no layer is selected, After Effects creates a shape layer. 
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3 Choose Edit > Preferences > General (Windows) or After Effects > Preferences > 
General (macOS). Select Center Anchor Point In New Shape Layers, and click OK. 


Preferences x 


The anchor point is the reference point After Effects uses when it changes a layer’s 
position, scale, or rotation. By default, a shape layer’s anchor point is at the center of 
the composition. Selecting Center Anchor Point In New Shape Layers positions the 
anchor point in the center of the first shape you draw on a layer. 


4 Select the Star tool (#), hidden behind the Rectangle tool (Œ) in the Tools panel. 


5 Drag a small star in the sky. 


The shape appears in the Composition panel, and After Effects adds a shape layer 
named Shape Layer 1 to the Timeline panel. 


6 Select the Shape Layer 1 layer name, press Enter or Return, change the layer 
name to Star 1, and press Enter or Return to accept the change. 
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Applying a fill and stroke 


You can change the color of a shape by modifying its Fill settings in the Tools panel. 
Clicking the word Fill opens the Fill Options dialog box, where you can select the kind 
of fill, its blending mode, and its opacity. Clicking the Fill Color box opens the Adobe 
Color Picker if the fill is solid or the Gradient Editor if the fill is a gradient. 


Similarly, you can change the color and width of the stroke of a shape by modify- 
ing its Stroke settings in the Tools panel. Click the word Stroke to open the Stroke 
Options dialog box; click the Stroke Color box to select a color. 


= 


Select the Star 1 layer in the Timeline panel. 
Click the Fill Color box (next to Fill) to open the Shape Fill Color dialog box. 
Change the color to a bright yellow (we used R=215, G=234, B=23), and click OK. 


A WwW N 


Click the Stroke Color box in the Tools panel, change the stroke color to a muddy 
yellow-green color (we used R=86, G=86, B=29), and then click OK. 


5 Make sure the Stroke Width value in the Tools panel is 2 px. 
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6 Choose File > Save to save your work so far. 


Creating a self-animating shape 


Wiggle Paths is a path operation that turns a smooth shape into a series of jagged peaks 
and valleys. You'll use it to make the star shimmer a little. Because the operation is self- 
animating, you need to change only a few properties for the entire shape to move on 
its own. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 


93 


94 


1 Expand the Star 1 layer in the Timeline panel, if it isn’t already expanded, and 
choose Wiggle Paths from the Add pop-up menu. 
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2 Press the spacebar to play the movie so you can see the effect. Press the 
spacebar again to stop playback. 


The star’s edge is too jagged. You'll change the settings for a subtler effect. 

3 Expand Wiggle Paths 1. Then change the Size to 2.0 and the Detail to 3.0. 

4 Change Wiggles/Second to 5.0. 

5 Click the Motion Blur switch (®) for the layer, and then hide the layer properties. 


When you enable Motion Blur for a layer, After Effects enables it for the 
composition. 
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6 Press the spacebar to preview the star’s effect; press it again to stop playback. 


The star shouldn't be visible during the daytime, so you'll animate its Opacity value. 
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7 Press the Home key or move the current-time indicator to the beginning of the 
time ruler. 


8 Select the Star 1 layer, and press T to reveal its Opacity property. 


9 Click the stopwatch (6) to create an initial keyframe at 100% opacity. 


10 Go to 2:15, and change the Opacity value to 0%. 


11 With the Star 1 layer selected, press T to hide the Opacity property. 


Duplicating a shape 


The sky should have more than one star, and they should all shimmer. You'll 
duplicate the star you created multiple times so that each of the new layers has 
the same properties as the original. Then you'll adjust each star’s position and 
rotation separately. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Select the Star 1 layer in the Timeline panel. 


3 Choose Edit > Duplicate. 


After Effects adds a Star 2 layer at the top of the layer stack. It is identical 
to the Star 1 layer, including its position. 


4 Press Ctrl+D (Windows) or Command+D (macOS) five more times to create 
five additional star layers. 


Background = 


Layer Name l-E. h 
+ E 
Star é à 
Star 5 
Star 4 
Star 3 
Star 2 
Star 1 
[Background.mov] 


> 
2 
a 
> 
> 
> 
> 
> 


1 
2 
3 
4 
5 
6 
7 
Hs 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 95 


96 


5 Select the Selection tool (PS) in the Tools panel, and press F2 to deselect all layers 
in the Timeline panel. 


6 Using the Selection tool, drag each star to a different position in the sky. 


7 Select the Star 1 layer, and then Shift-select the Star 7 layer. With all the star 
layers selected, press R, and then press Shift+S to reveal the Rotation and Scale 
properties for each layer. 
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8 Press F2 or click an empty area in the Timeline panel to deselect all layers. Then 
adjust the Rotation and Scale properties for each layer to create variation among 
the stars. You can also use the Selection tool to adjust the stars’ positions. 
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9 Press the spacebar to preview the animation. The stars twinkle and fade as night 
turns to day. Press the spacebar again to stop the playback. 


10 Hide the properties for all layers. Then select the Star 1 layer and Shift-select 
the Star 7 layer to select all the star layers again. 


11 Choose Layer > Pre-compose, name the new composition Starscape, and click OK. 
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After Effects creates a new composition named Starscape that contains the seven 
star shapes; the new composition replaces the layers in the Background composi- 
tion. You can continue to edit the star layers by opening the Starscape composition, 
but precomposing the layers keeps the Timeline panel organized. 


12 Choose File > Save to save your work so far. 


Creating custom shapes 


You can use the five shape tools to create a wide variety of shapes. However, the 
real power in using shape layers is that you can draw any shape and manipulate 
it in a myriad of ways. 


Drawing a shape with the Pen tool 


You'll use the Pen tool to draw a shape that resembles the bottom of a flowerpot. 
You'll also animate its color so that the flowerpot is dark at the beginning of the 
scene, but gets lighter as the sky lightens. 


1 Make sure no layers are selected in the Timeline panel, and then go to 1:10. 
2 Select the Pen tool (ø) in the Tools panel. 


3 Inthe Composition panel, click an initial vertex, and add three more to draw 
a shape that resembles the bottom of a flowerpot, as in the illustration. Click 
again in the initial vertex to close the shape. 


@ a 


È 


When you create the first vertex, After Effects automatically adds a shape layer— 
Shape Layer 1—to the Timeline panel. 


4 Select Shape Layer 1, press Enter or Return, and change the layer’s name to Base 
of Flowerpot. Press Enter or Return to accept the new name. 


5 With the Base of Flowerpot layer selected, click the Fill Color box in the Tools 
panel, and select a dark brown color (we used R=62, G=40, B=22). 


6 Click the word Stroke in the Tools panel to open the Stroke Options dialog box. 
Select the None option, and then click OK. 


7 Expand the Base of Flowerpot layer, and then expand the Contents, Shape 1, and 
Fill 1 properties. 
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8 Click the stopwatch (6) next to the Color property to create an initial keyframe. 
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9 Go to 4:01, click the Fill Color box, and change the fill color to a lighter brown. 
(We used R=153, G=102, B=59.) Then click OK. 
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10 Hide all layer properties. Press F2 or click an empty area in the Timeline panel 
to deselect all layers. 


Positioning layers with snapping 


Now you'll create the rim of the flowerpot and position it atop the base using 
the snapping feature in After Effects. 


Creating a shape with rounded corners 
You'll use the Rounded Rectangle tool to create the rim of the flowerpot. 
1 Goto 1:10. 


2 Select the Rounded Rectangle tool (@), hidden beneath the Star tool (%) 
in the Tools panel. 


3 Inthe Composition panel, drag a shape a little wider than the top of the flowerpot. 
Draw the shape a little bit above the base of the pot. 
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4 Select Shape Layer 1, press Enter or Return, and change the layer’s name to Rim 
of Flowerpot. Press Enter or Return to accept the new name. 


5 With the Rim of Flowerpot layer selected, expand the Contents, Rectangle 1, and 
Fill 1 properties. 


6 Click the eyedropper next to the Color property, and then click the base of the 
flowerpot in the Composition panel to sample the color. 


7 Click the stopwatch (ð) next to the Color property to create an initial keyframe. 
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8 Go to 4:01, and use the eyedropper again to change the fill color to match the 
lighter brown in the flowerpot base. 
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9 Hide all layer properties. Press F2 or click an empty area in the Timeline panel 
to deselect all layers. 


Snapping layers into position 


@ Note: You can The flowerpot layers currently have no relationship to each other in the composi- 


snap two shape layers tion. You'll use the Snapping option in After Effects to quickly align the layers. 
together, but not two 


shapes within a single When the Snapping option is enabled, the layer feature that is closest to your 
layer. Also, a layer must pointer when you click becomes the snapping feature. As you drag the layer near 


be visible to snap to it. other layers, features on other layers are highlighted, showing you where the snap- 
2D layers can snap to 
2D layers, and 3D layers 


can snap to 3D layers. 


ping feature would snap if you released the mouse button. 
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1 Select the Selection tool () in the Tools panel. 


2 Select Snapping in the options section of the Tools panel, if it’s not already selected. > Tip: If the Snapping 
option isn’t selected, 
you can temporarily 
enable it: Click a layer 
and start dragging, 


3 Select the Rim of Flowerpot layer in the Composition panel. and then press Ctrl 

, AY , (Windows) or Command 
When you select a layer in the Composition panel, After Effects displays the layer (macos) as you drag 
handles and anchor point. You can use any of these points as the snapping feature the layer. 
for a layer. 


4 Click near the bottom of the rim, and drag it near the upper edge of the Base 
of Flowerpot layer until it snaps into place. Be careful not to drag the corner itself, 
or you'll resize the layer. 


As you drag the layer, a box appears around the handle you selected, indicating that 
it is the snapping feature. 


5 Use the Selection tool to adjust the size of the rim or base of the flowerpot if you 
need to. 


6 Press F2 or click an empty area in the Timeline panel to deselect all layers. 


7 Choose File > Save to save your work. 


Animating a shape 


You can animate the Position, Opacity, and other Transform properties of shape 
layers just as you animate them in other layers. But shape layers provide additional 
opportunities for animation, including fills, strokes, paths, and path operations. 


You'll create another star, and then use the Pucker & Bloat path operation to trans- 
form it into a flower as it falls toward the flowerpot and changes color. 
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Animating a path operation 


Path operations are similar to effects. They modify a shape’s path while preserving 
the original path. Path operations are live, so you can modify or remove them at any 
time. You used the Wiggle Paths path operation earlier. Now you'll apply a Pucker & 
Bloat path operation. 


Pucker & Bloat pulls the vertices of a path outward while curving the segments 
inward (puckering), or pulls the vertices inward while curving the segments out- 
ward (bloating). You can animate the degree of pucker or bloat over time. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Select the Star tool (#”), hidden behind the Rounded Rectangle tool (@) 
in the Tools panel, and draw another star in the upper right area of the sky. 


After Effects adds a Shape Layer 1 layer to the Timeline panel. 


3 Click the Fill Color box, and change the fill color to the same bright yellow 
you used for the other stars. (We used R=215, G=234, B=23.) Then click OK. 


4 Click the Stroke Color box, change the stroke color to a red color (we used 
R=159, G=38, B=24), and then click OK. 


After Effects automatically changes the stroke options from None to Solid Color when 
you change the stroke color. 


5 Select the Shape Layer 1 layer, press Enter or Return, change its name to Falling 
Star, and press Enter or Return again. 
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6 Inthe Timeline panel, choose Pucker & Bloat from the Add pop-up menu 
in the Falling Star layer. 


7 Expand the Pucker & Bloat 1 properties in the Timeline panel. 


8 Change the Amount to 0, and click the stopwatch icon (6) to create an initial 
keyframe. 
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9 Go to 4:01, and change the amount to 139. 
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The star shape becomes a flower. After Effects creates a keyframe. 


Animating position and scale 


The star becomes a flower, but it should be falling as it changes. You'll animate its 
position and scale now. 


1 


Press the Home key or move the current-time indicator to the beginning of the 
time ruler. 


Select the Falling Star layer, and press P to reveal its Position property. Press 
Shift+S to reveal its Scale property, too. 


Click the stopwatch (6) next to each of the properties to create initial keyframes 
at their current values. 


Select the Selection tool, and go to 4:20. Then move the star to the center of the 
screen, hovering above the flowerpot between the tree and the house, so that 
it’s in its final position. (You may need to deselect Snapping in the Tools panel 
to position the flower where you want it.) At this point, the star has become a 
flower, but it hasn’t changed size. 


After Effects creates a Position keyframe. 


5 Go to 4:01. Increase the Scale value so that the flower is about the width of the 


flowerpot. The value you use depends on the original size of the star and on the 
width of the flowerpot. 
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6 Press the spacebar to preview the animation. The star falls as it becomes a flower, 
but its trajectory is straight. You want it to fall in a slight arc. Press the spacebar 
again to stop playback. 


7 Go to 2:20, and adjust the star’s position up, so that its path becomes a gentler arc. 
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8 Press the spacebar to preview the star’s path again, and then press the spacebar 
to stop playback. If you want to change the path, you can add Position keyframes 
at other points in the time ruler. 


9 Hide the properties for the Falling Star layer. 


Animating fill color 


Currently, the star remains yellow with a red stroke as it becomes a flower. You'll 
animate its fill color so that the final flower is red. 


1 Press the Home key or move the current-time indicator to the beginning of the 
time ruler. 


104 LESSON 4 Working with Shape Layers 


2 Expand the Falling Star layer, and then expand the Contents, Polystar 1, and 
Fill 1 properties. 


3 Click the stopwatch icon () next to the Color property to create an initial 
keyframe. 


4 Go to 4:01, and change the fill color to a red color. (We used R=192, G=49, B=33.) 
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5 Hide all layer properties. Press F2 or click an empty area in the Timeline panel 
to deselect all layers. 


6 Press the spacebar to preview your animation. Press the spacebar again to stop 
playback. 


7 Choose File > Save. 


Animating using parenting 


When you parent one layer to another, the child layer adopts the attributes of the 
parent layer. You'll draw a stem and leaves to meet the falling star. You can simply 
parent the leaves and stem to ensure they move together. 


Drawing curved shapes with the Pen tool 


First you'll draw the stem. It will have a slightly thicker stroke than the flower, but no 
fill, and it will rise to meet the flower. You'll draw leaves with a fill but no stroke. 


1 Go to 4:20, when the flower is in its final position. 
2 Select the Pen tool in the Tools panel. 


3 Click the word Fill to open the Fill Options dialog box, and then select the None 
option, and click OK. 


4 Click the Stroke Color box in the Tools panel, change the stroke color to green 
(we used R=44, G=73, B=62), and then click OK. Change the Stroke Width to 3 px. 
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5 Click just below the rim of the flowerpot to create an initial vertex, and then click 
at the center of the flower. Before releasing the mouse, drag the Bezier handle to 
create a subtle curve in the stem. 


6 Select the Shape Layer 1 layer, press Enter or Return, change its name to Stem, and 
press Enter or Return again. 


7 With the Stem layer selected, press P to reveal its Position property. Then click 
the stopwatch icon (6) to create an initial keyframe at its final position. 


8 Go to 3:00, and press Alt+[ (Windows) or Option+[ (macOS) to set the In point 
of the layer to the current time. 
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Ð Tip: If you haven't 9 Select the Selection tool (®) in the Tools panel, and drag the stem down so that 
already deselected the it is completely below the top of the flowerpot. Press Shift as you drag to move it 
Snapping option, you 
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it now in order to 
position the stem 
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straight down. 


The stem will begin to emerge from the pot at 3:00. Now you'll draw the leaves. 


10 Go to 4:20, where the flower is in its final position. 
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11 Press F2 or click an empty area of the Timeline panel to deselect all layers. Then 
select the Pen tool in the Tools panel, click the Fill Color box, select a color that is 
similar to the green stroke color (we used R=45, G=74, B=63), and click OK. Click 
the word Stroke, select None in the Stroke Options dialog box, and click OK. 


12 Click an initial vertex for the leaf near the base of the stem, and then click another 
for the other end of the leaf. Before you release the mouse, drag the Bezier handle 


to create a curved leaf. 


13 Press F2 to deselect the layer, and then repeat step 12 to draw another leaf for the 
other side of the stem. 


14 Select Shape Layer 1, press Return or Enter, rename it Leaf 1, and then press 
Return or Enter. Then rename Shape Layer 2 Leaf 2. 
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Parenting layers 
You'll parent the leaves to the stem so they'll emerge with it. 


1 Move the Stem, Leaf 1, and Leaf 2 layers beneath the Base of Flowerpot layer 
in the Timeline panel so that the stem and leaves will be behind the flowerpot 
as they rise. 


2 Hide all layer properties, and deselect all layers. 
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3 Drag the pick whip (@) from the Leaf 1 layer to the Stem layer, and then drag 
the pick whip from the Leaf 2 layer to the Stem layer. 
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The Leaf 1 and Leaf 2 layers will move in relationship to the Stem layer. 


The layers aren’t needed until the stem begins to emerge at 3:00, so you'll set their 
In point to match the stem’s. 


4 Go to 3:00. Select the Leaf 1 layer and Shift-select the Leaf 2 layer. Then press 
Alt+[ (Windows) or Option+[ (macOS) to set the In point for both of the layers. 


About parent and child layers 


Parenting assigns one layer’s transformations to another layer, called a child layer. 
Creating a parenting relationship between layers synchronizes the changes in the 
parent layer with the corresponding transformation values of the child layers, except 
opacity. For example, if a parent layer moves 5 pixels to the right of its starting 
position, then the child layer also moves 5 pixels to the right of its starting position. 
A layer can have only one parent, but a layer can be a parent to any number of 2D 

or 3D layers within the same composition. Parenting layers is useful for creating 
complex animations, such as linking the movements of a marionette or depicting 
the orbits of planets in the solar system. 


For more information on parent and child layers, see After Effects Help. 
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Using nulls to connect points 


You've learned that parenting connects one layer to another. Sometimes you want 
to connect a single point to another layer—for example, the top of the stem in your 
animation to the flower itself. The Create Nulls From Paths panel lets you do just 
that. A null object is an invisible layer that has all the same properties as other layers 
so that it can serve as a parent to any layer. The Create Nulls From Paths panel cre- 
ates null objects based on specific points, which you can then parent to other layers 
without having to write complex expressions. 


There are three options in the Create Nulls From Paths panel: Points Follow Nulls 
creates nulls that control the position of the path points; Nulls Follow Points creates 
nulls that are controlled by the positions of the path points; and Trace Path creates a 
single null with its position linked to the coordinates of the path. 


You'll create a null for the point at the top of the stem, and then you'll join that null 
to the flower so the two remain connected even as the flower moves. 


1 Go to 4:20 so you can see the stem and leaves well. 
2 Choose Window > Create Nulls From Paths.jsx. 


3 Expand the Stem layer in the Timeline panel, and then expand Contents > 
Shape 1 > Path 1. 


4 Select Path. 


You must select a path in the Timeline panel in order to create a null using the options 
in the Create Nulls From Paths panel. 


5 Click Points Follow Nulls in the Create Nulls From Paths panel. 
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@ Note: After you After Effects creates two nulls, corresponding to the two points on the stem path. 


create the nulls, you can 
close the Create Nulls 
From Paths panel, or 


The null objects appear in gold in the Composition panel, and as layers named Stem: 
Path 1 [1.1.0] and Stem: Path 1 [1.1.1] in the Timeline panel. You only need the null 
you can leave it open. for the top point. 


6 Select the null that corresponds to the bottom point of the stem, and delete it. 


7 Inthe Timeline panel, drag the pick whip (Œ) from the Stem: Path 1 [1.1.1] layer 
to the Falling Star layer. 
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8 Move the current-time indicator across the time ruler to see how the stem 
connects to the flower. 


You'll animate the flower subtly, and the stem will move with it. 


9 Go to 4:28, and use the Selection tool to move the flower a bit to the right 
as if it had been moved by the wind. 
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10 Select the Falling Star layer, and press R to reveal its Rotation property. Then 
go to 4:20, and click the stopwatch icon to create an initial keyframe at its 
original rotation. Go to 4:28, and change the rotation to 30°. 
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11 Choose File > Save to save your work. 


Previewing the composition 


You've created several shape layers using shape tools and the Pen tool, animated 
them, and used null objects to parent them. It’s time to see how it all comes 
together. 


1 Hide all layer properties, and then press F2 to deselect all layers. 


2 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


3 Press the spacebar to preview your animation. Press the spacebar again 
to stop playback. 
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B Tip: To rotate a leaf 
from its tip, use the Pan 
Behind tool to move its 
anchor point to the tip. 


4 


Make any adjustments you need to make. For example, if the leaves protrude 
from the flowerpot as they rise with the stem, use the Selection tool to adjust 
their position or rotation, or animate the leaves’ opacity so that they are visible 
only as they emerge from the pot. 


Choose File > Save to save the final project. 


Animating layers to match audio 


You can time animation to match the beat of an audio file. First you need 
to create keyframes from the amplitude of the audio (which determines loudness), 
and then sync the animation to those values. 


e To create keyframes from audio amplitude, right-click or Control-click the audio 
layer in the Timeline panel, and choose Keyframe Assistant > Convert Audio To 
Keyframes. After Effects adds the Audio Amplitude layer. The new layer is a null 
object layer, meaning it has no size or shape and won't appear in a final render. 
After Effects creates keyframes that specify the amplitude of the audio file in 
each frame of the layer. 


e To sync an animated property with the audio amplitude, select the Audio 
Amplitude layer, and press E to display the effects properties for the layer. 
Expand the channel you want to use. Then Alt-click (Windows) or Option-click 
(macOS) the stopwatch icon for the property whose animation you want to 
sync with to add an expression; with the expression selected in the time ruler, 
click the pick whip icon (Œ) on the Expression:[property name] line, and drag 
it to the Slider property name in the Audio Amplitude layer. When you release 
the mouse, the pick whip snaps, and the expression in the shape layer time 
ruler now means that the property values for the layer will depend on the Slider 
values of the Audio Amplitude layer. 
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Review questions 


1 What is a shape layer, and how do you create one? 
How can you create multiple copies of a layer, including all of its properties? 


How can you snap one layer to another? 


A WwW N 


What does the Pucker & Bloat path operation do? 


Review answers 


1 A shape layer is simply a layer that contains a vector graphic called a shape. To create 
a shape layer, draw a shape directly in the Composition panel, using any of the drawing 
tools or the Pen tool. 


2 To duplicate a layer, select it, and choose Edit > Duplicate, or press Ctrl+D (Windows) 
or Command+D (macOS). All of the original layer’s properties, keyframes, and other 
attributes are included in the new layer. 


3 To snap one layer to another in the Composition panel, select Snapping in the 
options section of the Tools panel. Then click next to the handle or point you want 
to use as a snapping feature, and drag the layer close to the point to which you want 
to align it. After Effects highlights the points to which it will align when you release 
the mouse button. 


4 Pucker & Bloat pulls the vertices of a path outward while curving the segments inward 
(puckering), or pulls the vertices inward while curving the segments outward (bloating). 
You can animate the degree of pucker or bloat over time. 
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ANIMATING A MULTIMEDIA 
PRESENTATION 


Lesson overview 

In this lesson, you'll learn how to do the following: 

e Create a complex animation with multiple layers. 

e Adjust the duration of a layer. 

e Animate with Position, Scale, and Rotation keyframes. 
e Use parenting to sync the animation of layers. 

e Use Bezier curves to smooth a motion path. 

e Animate a precomposed layer. 

e Apply effects to a solid layer. 


e Fade out audio. 


This lesson will take about an hour to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


PROJECT: ANIMATED VIDEO 
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Adobe After Effects projects typically use a variety 
of imported footage, arranged in a composition, 
that is edited and animated using the Timeline 
panel. In this lesson, you'll become more familiar 
with animation fundamentals as you build a 
multi-media presentation. 
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Getting started 


In this project, you will animate a hot air balloon floating through the sky. 
All seems peaceful until a gust of wind blows the balloon’s colorful canvas 
off to cover the clouds. 


1 Make sure the following files are in the Lessons/Lesson05 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: Balloon.ai, Fire.mov, Sky.ai, Soundtrack.wav 
e Inthe Sample_Movies folder: Lesson05.movy, Lesson05.avi 


2 Open and play the Lesson05.avi sample movie in Windows Movies & TV or the 
Lesson05.mov sample movie in QuickTime Player to see what you will create 
in this lesson. When you are done, close Windows Movies & TV or QuickTime 
Player. You may delete the sample movies from your hard disk if you have 
limited storage space. 


As you start After Effects, restore the default application settings. See “Restoring 
default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. 


4 Click New Project in the Home window. 
5 Choose File > Save As > Save As. 


6 Inthe Save As dialog box, navigate to the Lessons/Lesson05/Finished_Project 
folder. Name the project Lesson05_Finished.aep, and then click Save. 


Importing the footage 


Next, you'll import the footage you need for the project, including the balloon.ai 
composition. 


1 Double-click an empty area of the Project panel to open the Import File 
dialog box. 


2 Navigate to the Lessons/Lesson05/Assets folder on your hard disk, and select 
the Sky.ai file. 


3 Choose Footage from the Import As menu, and then click Import or Open. 
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In the Sky.ai dialog box, make sure Merged Layers is selected, and then click OK. 


lors+ (Straight) 


Double-click an empty area of the Project panel, navigate to the Lessons/ 


Lesson05 /Assets folder, and select the Balloon.ai file. 


Choose Composition — Retain Layer Sizes from the Import As menu, and click 


Import or Open. 


Press Ctrl+I (Windows) or Command+I (macOS) to open the Import File dialog 


box again. 


Using Creative Cloud 
Libraries in After Effects 


Easily access images, videos, colors, and other assets Libraries 
you've created in After Effects and other Adobe My Library 
applications. Through Creative Cloud Libraries, balloon 

you can also use Looks, shapes, and other assets 
you create with Adobe Capture and other 
mobile apps. Creative Cloud Libraries also make 
it easy to access After Effects motion graphic 
templates in Adobe Premiere Pro. 


> Results from Adobe Stock 


Even Adobe Stock images and videos are available 
in the Libraries panel: Search and browse assets 
within the panel, download watermarked versions 
to see how they work with your projects, and 
license the ones you want to keep—all without 
leaving After Effects. 


The same search bar you use to search Adobe Stock 
makes it easier to find specific items in your 
Creative Cloud Libraries, too. 


To learn more about all the ways you can use 
Creative Cloud Libraries, see After Effects Help. 
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8 Navigate to the Lessons/Lesson05/ 
Assets folder, and select the 
Fire.mov file. 


9 Make sure Footage is chosen in the 
Import As menu, and click Import 
or Open. 


Creating the composition 
You'll create the composition and add the sky. 


1 Click New Composition in the Composition panel. 


@ Note: If you 2 Inthe Composition Settings dialog box, do the following: 

change Pixel Aspect TNR 

Ratio or Width settings, e Name the composition Balloon Scene. 

the Presetname may e Choose HDTV 1080 25 from the Preset menu. 

change to Custom 

in the Composition e Make sure Square Pixels is chosen from the Pixel Aspect Ratio menu. 


Settings panel. 
e Make sure the Width is 1920 px and Height is 1080 px. 


e Choose Quarter for the Resolution. 
e Set Duration to 20 seconds (20:00). 
e Click OK. 


Balloon Scene 


J: Square Pixels 


Quarter 
0:00:00:00 


n: 0:00:20:00 


| E 
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3 Drag the Sky.ai footage item from the Project panel into the Timeline panel. 


The balloon will float across the Sky.ai image. The far right of the image contains 
the canvas-wrapped clouds that appear at the end of the scene. The wrapped clouds 
shouldn't be visible earlier in the movie. 


4 Inthe Composition window, drag the Sky layer so that its lower left corner is even 
with the lower left corner of the composition. 


> Ap 


Adjusting anchor points 


The anchor point is the point around which transformations, such as scaling or rotation, 
are performed. By default, a layer’s anchor point is at the center of the layer. 


You'll change the anchor points for the character’s arm and head so that you can 
better control the character’s movements as he tugs on the cord to ignite the fire and 
as he looks up and down. 


1 Double-click the Balloon composition in the Project panel to open it in the 
Composition panel and the Timeline panel. 


Balloon v 


Green Canvas 
Red Canvas 
Blue Canvas 
Yellow Canvas 
Eyes 

Head 

Balloon 
Forearm 


1 
2 
3 
4 
5 
6 
7 
8 
9 


Upper arm 


The Balloon composition includes layers for the canvas colors, the balloon itself, 
and the character’s eyes, head, forearm, and upper arm. 
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2 Zoom into the image using the Magnification Ratio pop-up menu at the bottom 
of the Composition panel so you can see the balloon’s detail more clearly. 


3 Select the Hand tool (W) in the Tools panel, and then pan so that the character 
is centered in the Composition panel. 


. (Half) Active Camera Y 


4 Select the Selection tool (>) in the Tools panel. 
5 Select the Upper arm layer in the Timeline panel. 


6 Select the Pan Behind tool (2) in the Tools panel (or press Y to activate it). 


With the Pan Behind tool, you can move the anchor point without moving the entire 


layer in the Composition window. 
7 Move the anchor point to the character’s shoulder. 


8 Select the Forearm layer in the Timeline panel, and then move its anchor point 
to the elbow. 


9 Select the Head layer in the Timeline panel, and move its anchor point to the 
character’s neck. 
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10 Select the Selection tool in the Tools panel. 


11 Choose File > Save to save your work so far. 


Parenting layers 


This composition includes several layers that need to move together. For example, 
as the balloon floats, the character’s arm and head should move along with it. 

As you've seen in previous lessons, a parenting relationship synchronizes changes 
in the parent layer with corresponding changes in the child layer. You'll establish 
parenting relationships among the layers in this composition, and you'll add the fire 
video as well. 


1 Deselect all layers in the Timeline panel, and then press Ctrl (Windows) 
or Command (macOS) as you select the Head and Upper arm layers. 


2 Inthe Parent column for either of the selected layers, choose 7. Balloon from 
the pop-up menu. 


Green Canvas 
Red Canvas 
Blue Canvas 
Yellow Canvas 
Eyes 


Balloon 
Forearm 
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This establishes both the Head and Upper arm layers as child layers of the Balloon 
layer. When the Balloon layer moves, the other two layers will move with it. 


The eyes not only need to move with the balloon, they need to move with the head, 
so you'll create that parenting relationship next. 
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3 Inthe Parent column for the Eyes layer, choose 6. Head from the pop-up menu. 
The forearm should move with the upper arm as well. 


4 Inthe Parent column for the Forearm layer, choose 9. Upper arm from the 
pop-up menu. 


Green Canvas 
Red Canvas 


Blue Canvas 
Yellow Canvas 
Eyes 

Head 

Balloon 
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Upper arm 


Now you need to ensure that the fire video travels with the balloon. 


5 Drag the Fire.mov file from the Project panel to the Timeline panel, positioning 
it directly below the canvas layers so that the fire will appear to go inside the 
balloon, rather than outside it. (The Fire layer should be between the Yellow 
Canvas layer and the Eyes layer.) 


The fire video is positioned in the center of the composition, so you'll need to zoom 
out a bit to see it. 


6 Choose 25% from the Magnification Ratio pop-up menu so that you can see the 
outline of the selected video. 


7 Inthe Composition window, drag the fire video over the burner. To see the flame 
in action so you can position it correctly, drag the current-time marker across 
the first second of the time ruler. 


8 When you're satisfied with the Fire layer’s position, choose 8. Balloon from 
the pop-up menu in the Fire layer’s Parent column. 


Green Canvas 
Red Canvas 
Blue Canvas 
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9 Choose File > Save to save your work so far. 
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Precomposing layers 


As you've seen in previous lessons, sometimes it’s easier to work with a set of layers. 


Precomposing layers moves them to a new composition, nested inside the original 
composition. You'll precompose the canvas layers so that you can work with them 
separately when you animate them sailing off the balloon. 


1 Inthe Balloon Timeline panel, Shift-click the Green Canvas and Yellow Canvas 
layers to select all four canvas layers. 


2 Choose Layer > Pre-compose. 


3 In the Pre-compose dialog box, name the composition Canvas, select Move 
All Attributes Into The New Composition, and click OK. 


Yellow canvas E; 


B [Fire.mov] 


ope a > - Layer Name 
o . B [Fire.mov] p 
Eyes 


The four layers you selected in the Timeline panel are replaced by a single Canvas 
composition layer. 


4 Double-click the Canvas layer in the Timeline panel to edit the composition. 
5 Choose Composition > Composition Settings. 


6 Inthe Composition Settings dialog box, deselect Lock Aspect Ratio, change 
the Width value to 5000 px, and click OK. 
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7 Shift-select all four layers in the Timeline panel, and then drag them to the far 
left side of the Composition panel. You may need to change the magnification. 


Increasing the width of the composition and then moving the canvas to the far left 
side will give you room to animate the canvas layers later. 


8 Switch to the Balloon Timeline panel. 


You moved the canvas to the far left side of the Canvas composition, revealing the 
uncovered balloon in the Balloon composition. At the beginning of the animation, 
though, the canvas should be on the balloon. You'll reposition the Canvas layer. 


9 Choose Fit from the Magnification Ratio pop-up menu in the Composition 
panel so you can see the full balloon. 


10 Select the Canvas layer in the Timeline panel, and then drag the layer so that 
it covers the bare balloon in the Composition panel. 


11 In the Parent column of the Canvas layer, choose 5. Balloon from the pop-up 
menu so that the canvas will follow the balloon. 
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B [Fire.mov] 
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Balloon 


p P 


p P 


Forearm 


4 


Upper arm 


124 LESSON 5 Animating a Multimedia Presentation 


Keyframing a motion path 


Now that all the initial pieces are set up, you're ready to animate the balloon and 
the character using position and rotation keyframes. 


Copying layers into a composition 


You’ve worked with the balloon, character, and fire layers in the Balloon composition. 
Now, you'll copy those layers into the Balloon Scene composition. 


1 Inthe Balloon Timeline panel, Shift-click the Canvas and Upper arm layers 
to select all the layers in the composition. 


Press Ctrl+C (Windows) or Command+C (macOS) to copy all the layers. 
Switch to the Balloon Scene Timeline panel. 


Press Ctrl+V (Windows) or Command+V (macOS) to paste the layers. 


uu F&F W N 


Click an empty area in the Timeline panel to deselect all layers. 


Hea J 
Balloon/Balloon.ai 
Forearm/Balloonai 
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Sky.ai 


The layers appear in the same order they were when you copied them, and they 
retain all the properties they had in the Balloon composition, including parenting 
relationships. 


Placing initial keyframes 


The balloon will enter the scene from the bottom, drift through the sky, and eventually 
depart from the upper right corner of the frame. You'll keyframe the balloon’s 
starting and ending points first. 


1 Select the Balloon/Balloon.ai layer, and press S to reveal its Scale property. 


2 Press Shift+P to display its Position property, and then press Shift+R to display 
the Rotation property. 


@ Note: Make sure to 
select the Canvas layer 
first and then Shift-click 
the Upper arm layer 

to copy layers in their 
original order. 
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3 Change the Scale property to 60%. 
The balloon and all of its child layers scale to 60%. 


4 Choose 12.5% from the Magnification Ratio pop-up menu in the Composition 
panel so that you can see the pasteboard around the composition. 


5 Inthe Composition panel, drag the balloon and its child layers offscreen, below 
the scene. (We used Position values 844.5, 2250.2.) 


6 Drag the Rotation value to rotate the balloon so it tilts to the right. (We used 
19 degrees.) 


7 Click the stopwatch icons (ð) for the Position, Scale, and Rotation properties 
to create initial keyframes. 


Head/Balloon.ai 


Balloon/Balloon.ai 
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8 Goto 14:20. 
9 Scale the balloon to about one-third its original size. We used 39.4%. 


10 Drag the balloon off the upper right corner of the frame, tilted slightly to 
the left. We used the following values: Position 2976.5, —185.8; Rotation 
—8.1 degrees. 


ECE Canvas 
B Firemov 


Eyes/Balloonai 


Head/Balloon.ai 


Balloon/Balloon.ai 


L Rotation 


11 Move the current-time indicator across the timeline to see the animation so far. 
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Customizing a motion path 


The balloon moves through the scene, but its path isn’t very interesting, and it 

isnt onscreen long. You'll customize the path between its start point and end point. 
You can use the values we used or create your own path, as long as the balloon stays 
fully visible on the screen until a little after 11 seconds, and then slowly makes its 
way offscreen. 


1 Go to 3:00. 


2 Drag the balloon straight up so that the character and the basket are fully 
visible, and then rotate it slightly to the left. (We used Position 952.5, 402.2; 
Rotation —11.1 degrees.) 


Layer Name 
EF Canvas 
B Firemov 


Eyes/Balloonai 
Head/Balloon.ai 
Balloon/Balloon.ai 


M Rotation 


Go to 6:16. 

Shift the balloon’s rotation the other direction. (We used 9.9 degrees.) 

Move the balloon to the left side of the scene. (We used Position 531.7, 404.) 
Go to 7:20. 

Change the scale to 39.4%. 


on A uu Aà W 


Set additional Rotation keyframes to create swirling motions. If you’re using 
our values, do the following: 


e At 8:23, change the Rotation value to —6.1. 

e At 9:16, change the Rotation value to 22.1. 

e At 10:16, change the Rotation value to —18.3. 
e At 11:24, change the Rotation value to 11.9. 
e At 14:19, change the Rotation value to —8.1. 


9 Set additional Position keyframes to move the balloon. If you're using our values, 
do the following: 


e At 9:04, change the Position to 726.5, 356.2. 
e At 10:12, change the Position to 1396.7, 537.1. 
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10 Press the spacebar to preview the balloon’s current path, and then press 
the spacebar again to stop the preview. Save your work so far. 


> 


Using Bezier handles to smooth a motion path 


The basic path is in place, but you can smooth it out a bit. Each keyframe includes 
Bezier handles that you can adjust to change the angle of the curve. You'll learn 
more about Bezier curves in Lesson 7. 


1 Choose 50% from the Magnification Ratio pop-up menu in the Composition panel. 


2 Make sure the Balloon/Balloon.ai layer is selected in the Timeline panel. Then 
move the current-time indicator to a position where you can clearly see the motion 
path in the Composition panel. (Between 4 and 6 seconds is probably good.) 


3 Click a keyframe point in the Composition panel to reveal its Bezier handles, 
if they aren't already shown. 


4 Drag a Bezier handle to change the curve for that keyframe. 


5 Continue to drag Bezier handles for the keyframe points until you achieve 
the path you want. Our final path is shown below in the image on the right. 


128 LESSON 5 Animating a Multimedia Presentation 


6 Preview the balloon on the path by moving the current-time indicator across 
the time ruler. Make any adjustments you want. You can also make adjustments 
later, after you’ve animated the canvas and sky. 


7 Hide the properties for the Balloon layer, and save your work so far. 


Animating additional elements 


The balloon swoops and swirls through the sky, and its child layers go with it. 
But the character is currently static in his balloon. You'll animate his arm tugging 
on the cord to ignite the burner. 


1 Go to 3:08. 


2 Choose 100% from the Magnification Ratio pop-up menu in the Composition 
window so that you can see the character clearly. Use the Hand tool to adjust 
the image in the Composition window if you need to. 


3 Shift-select the Forearm/Balloon.ai layer and the Upper arm/Balloon.ai layer. 
4 Press R to reveal the Rotation property for both layers. 


5 Click the stopwatch icon next to one of the Rotation properties to create an initial 
keyframe for each. 


Balloon/Balloon.ai 


Forearm/Balloon.ai > 


Rotation x 
Upper arm/Balloonaij F 


Rotation 


6 Go to 3:17, the point at which the character will tug the cord to ignite the burner. 
7 Deselect the layers. 


8 Change the Rotation property for the Forearm layer to -35 and the Rotation 
property for the Upper arm layer to 46. 


The character tugs the cord down. You may need to deselect the layers so you can 
see the action clearly in the Composition window. 
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9 Goto 4:23. 


10 Change the Rotation property for the Forearm layer to —32.8. 


11 Click the Add Or Remove Keyframe At Current Time button (¢) to the left of the 
Rotation property for the Upper arm layer. 


12 Go to 5:06. 
13 Change the Rotation value for both layers to 0. 


Upper arm/Balloon.ai} + 


Rotation 


14 Deselect both layers, and then manually preview from 3:00 to 5:07 to see 
the character tug the cord. You may need to zoom out to see the animation. 


Duplicating keyframes to repeat an animation 


Now that you've created the initial movements, you can easily repeat them at 
different times in the timeline. You'll duplicate the tugging arm, and then create 
corresponding head and eye movements. 


1 Select the Rotation property for the Forearm layer to select all its keyframes. 
2 Press Ctrl+C (Windows) or Command+C (macOS) to copy the keyframes. 

3 Go to 7:10, the point at which the character tugs the cord again. 
4 


Press Ctrl+V (Windows) or Command+V (macOS) to paste the keyframes. 
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5 Repeat steps 1—4 to copy the Upper arm Rotation property keyframes. 


tat 
/Balloon.ai] F 


Ro 


6 Hide the properties for all layers. 

7 Select the Head layer, and press R to reveal its Rotation property. 

8 Go to 3:08, and click the stopwatch icon to create an initial keyframe. 
9 Go to 3:17, and change the Rotation property to —10.3. 


10 Go to 4:23, and click the Add Or Remove Keyframe At Current Time icon 
to add a keyframe at the current value. 


11 Go to 5:06, and change the Rotation property to 0. 


12 Select the Rotation property to select all of its keyframes, and press Ctrl+C 
(Windows) or Command+C (macOS) to copy them. 


13 Go to 7:10, and press Ctrl+V (Windows) or Command+V (macOS) to paste them. 
14 Press R to hide the Rotation property for the Head layer. 


Now the character tilts his head up each time he tugs the cord. You'll also animate 
the position of his eyes to create a subtle change each time he tilts his head. 


15 Select the Eyes layer, and press P to reveal the Position property. 


16 Go to 3:08, and click the stopwatch icon to create an initial keyframe 
at the current value (62, 55). 


17 Go to 3:17, and change the Position value to 62.4, 53. 
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18 Go to 4:23, and create a keyframe at the current value. 

19 Go to 5:06, and change the Position value to 62, 55. 

20 Select the Position property to select all its keyframes, and then copy them. 
21 Go to 7:10, and paste the keyframes. 


22 Hide all layer properties, and then deselect all layers. 


23 Choose Fit from the Magnification Ratio pop-up menu in the Composition 
window so that you can see the entire scene. Then preview the animation. 


24 Save your work. 


Positioning and duplicating a video 


When the character tugs the cord, flame should emerge from the burner. You'll use 
the four-second Fire.mov video to represent the flame each time the cord is tugged. 


1 Go to 3:10. 
2 Drag the Fire.mov video in the Timeline panel so that it starts at 3:10. 
3 Select the Fire.mov layer, and choose Edit > Duplicate. 

4 Goto 7:10. 
5 


Press the left bracket key ([) on your keyboard to move the In point of the duplicate 


Fire.mov layer to 7:10. 
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Applying an effect 


Now that the balloon and character are taken care of, you'll create the gust of wind 
that blows the canvas off the balloon. The Fractal Noise and Directional Blur effects 


will work well. 


Adding a solid-color layer 


You need to apply the effects on their own layer, which will be a solid-color layer. 


You'll create a new composition for the layer. 


1 Press Ctrl+N (Windows) or Command+N (macOS) to create a new composition. 


2 Inthe Composition Settings dialog box, do the following: 


Name the composition Wind. 

Change the width to 1920 px. 

Change the height to 1080 px. 

Change the duration to 20 seconds. 

Change the Frame Rate to 25 fps to match the Balloon Scene composition. 


Click OK. 


Ou 
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3 Right-click or Control-click in the Timeline panel, and choose New > Solid. 
4 Inthe Solid Settings dialog box, do the following: 

e Name the layer Wind. 

e Select black for the color. 

e Click the Make Comp Size button. 

e Click OK. 


nits: pixels 


stio: Square Pixels 


About solid-color layers 


Use solid layers to color a background or to create simple graphic images. You 

can create solid images of any color or size (up to 30,000 x 30,000 pixels) in 

After Effects. After Effects treats solids as it does any other footage item: You can 
modify the mask, transform properties, and apply effects to a solid layer. If you 
change settings for a solid that is used by more than one layer, you can apply the 
changes to all layers that use the solid or to only the single occurrence of the solid. 


Applying the effects 


You're ready to apply the effects to the solid layer. The Fractal Noise effect will create 
the gust of wind. The Directional Blur effect will create a blur in the direction the 
canvas flies. 


1 Inthe Effects & Presets panel, search for the Fractal Noise effect; it’s in the Noise 
& Grain category. Double-click the Fractal Noise effect to apply it. 
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2 Inthe Effect Controls panel, do the following: 
e Choose Smeary for the Fractal Type. 
e Choose Soft Linear for the Noise Type. 
e Set the Contrast to 700. 
e Set the Brightness to 59. 
e Expand the Transform properties, and set the Scale to 800. 


3 Click the stopwatch next to Offset Turbulence to create an initial keyframe 
at the beginning of the time ruler. 


4 Go to 2:00, and change the x value for Offset Turbulence to 20,000 px. 


5 Hide the Fractal Noise properties in the Effect Controls panel. 


6 Inthe Effects & Presets panel, search for the Directional Blur effect, and then 
double-click it to apply it. 


7 Inthe Effect Controls panel, set the Direction to 90 degrees and the Blur Length 
to 236. 


fx BA Fractal Noise 


fa») Directional Blur | 


You've created a sense of motion. Now you need to add the Wind composition 
to the Balloon Scene composition. 
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8 Switch to the Balloon Scene Timeline panel. 


9 Click the Project tab, and then drag the Wind composition from the Project 
window into the Balloon Scene Timeline above all the other layers. 


10 Go to 8:10, and then press the left bracket key ([) so that the Wind layer starts 
at 8:10. 


Finally, you'll apply a blending mode and adjust the opacity to make the effect 
of the wind more subtle. 


11 Click Toggle Switches/Modes at the bottom of the Timeline panel to view 
the Mode column. 


12 Choose Screen from the Wind layer’s Mode pop-up menu. 


13 Press T to reveal the Opacity property for the Wind layer, and then click the 
stopwatch to create an initial keyframe at the beginning of the layer (8:10). 


14 Go to 8:20, and change the opacity to 35%. 
15 Go to 10:20, and change the opacity to 0%. 


16 Press T to hide the Opacity property, and then save your work so far. 


Animating precomposed layers 


Earlier, you precomposed the four canvas layers, creating a composition called 
Canvas. You then positioned the Canvas composition layer to match the balloon, 
and parented the two. Now, you'll animate the canvas layers so that they blow 
off the balloon when the gust of wind occurs. 


1 Double-click the Canvas layer to open the Canvas composition in the Composition 
panel and the Timeline panel. 


2 Go to 9:10, which is about a second after the wind effect begins. 


3 Shift-select all four layers, and then press R to display their Rotation properties; 
press Shift+P to display the Position properties, too. 


4 With all layers still selected, click the stopwatch icons for the Position and Rotation 
properties in one of the layers to create initial keyframes for all of them. 
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Rotation ~ 


[Red Canvas sd) 


~ Rotation x 


Blue Canvas P 


Rotation K 


Yellow Canvas P 
Positic 


w Rotation 


5 Goto 9:24, 


6 With all layers still selected, drag a Rotation value until the canvas is nearly 
horizontal (about 81 degrees). All four canvas layers become nearly horizontal. 


7 Press F2 or click an empty area in the Timeline panel to deselect all areas so you 
can adjust their Rotation values separately. 


8 Adjust each Rotation value, using positive and negative numbers so that there 
is some variation in their appearance. (We used these values: Green +100, 
Red —74, Blue +113, Yellow —103.) 


9 Goto 10:12. 


10 Move all the canvas layers off the screen to the right. Vary their motion paths 
to make them more interesting. You can add intermediate rotation and position 
keyframes (between 10:06 and 10:12), edit Bezier curves, or just drag the canvas 
layers off the edge. If you edit the Bezier curves, make changes only to the 
keyframes on the right side of the motion path (at 10:12) so you don’t disturb 
the original balloon formation. 


Green Canvas 


Red Canvas 
Posit 
Rotation 


Blue Canvas 


F 


Rotation 
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11 Move the current-time indicator across the time ruler to preview the animation, 


and then make any adjustments you want. 


12 Hide the properties for all layers, and save your work. 


Adding an adjustment layer 


You'll add a warp effect to the canvas. You can use an adjustment layer to apply 
an effect to all the layers beneath it at once. 


1 Click an empty area in the Timeline panel to deselect all layers. 
2 Choose Layer > New > Adjustment Layer. 
A new adjustment layer is automatically added to the top of the layer stack. 


3 Inthe Effects & Presets panel, navigate to the Wave Warp effect in the Distort 
category, and then double-click the effect. 


4 Goto 9:12. 
5 Inthe Effect Controls panel, change W 6 Effect Controls Adjustment Layer 1 
Wave Height to 0 and Wave Width Canvas + Adjustment Layer 1 
to 1. Then click the stopwatch icons X x | Weve Warp 
oo. © Wave Type 
to create initial keyframes for each > Č Wave Height 
of them. > © Wave Width 
6 Goto 9:16. 


7 Change the Wave Height value to 90 and the Wave Width value to 478. 


Trimming a layer 


You don’t need the Wave Warp effect until the canvas flies off the balloon, but even 
if the values are 0, After Effects will have to calculate the effect for the entire layer. 
So you'll trim the layer to speed up the time it takes to render the file. 
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Go to 9:12. 


Press Alt+[ (Windows) or Option+[ (macOS) to set the In point to 9:12. @ Note: Press [to 
, : move the In point of a 
Return to the Balloon Scene Timeline panel. clip without changing 


its duration. Press Alt+[ 
; or Option+[ to trim a 
the preview. clip to a new In point, 
shortening its duration. 


Press the spacebar to preview the movie. Press the spacebar again to stop 


Save your work so far. 


Animating the background 


The movie should end with the revelation that the canvas from the balloons has 


been draped on the clouds. But right now, the canvas flies off and the balloon floats 


away. You need to animate the sky so that the canvas-covered clouds are centered 


at the end of the scene. 


1 


2 
3 
4 


In the Balloon Scene Timeline panel, go to the beginning of the time ruler (0:00). 
Select the Sky layer, and press P to display its Position property. 
Click the stopwatch icon to create an initial keyframe. 


Go to 16:00, and drag the Sky layer down and to the left until the wrapped 
clouds are in the center of the frame. (Our values are —236.4, 566.7.) 


Go to 8:00, and move the wrapped clouds completely off the screen, far off 
to the right. 


Right-click or Control-click the first keyframe, and choose Keyframe Assistant > 
Easy Ease Out. 
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7 Right-click the middle keyframe, and choose Keyframe Assistant > Easy Ease, and 
then right-click the last keyframe, and choose Keyframe Assistant > Easy Ease In. 

8 Move the current-time indicator through the time ruler to see how the departure 
of the canvas matches up with the appearance of the canvas-colored clouds. The 
canvas should be completely offscreen before the canvas-colored clouds appear. 


9 Move the middle keyframe forward and backward in the time ruler to adjust 
the sky animation so that it matches the progress of the canvas and the balloon. 
The bare balloon should float in front of at least a few of the canvas-colored 
clouds before it disappears. 


10 Press the spacebar to preview the entire video. Press the spacebar again to stop 
the preview. 


a |. | 
AS 


11 Adjust the motion paths and rotations for the balloon, canvas pieces, or the sky 


as necessary. 


12 Hide the properties for all layers, and save the project. 
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Adding an audio track 


Give yourself a hand—you’ve done a lot of animating in this project. But you're not 
quite done. You'll add a soundtrack that matches the lighthearted mood of the video, 
and fade it out. You'll also shorten the composition, since the last few seconds are static. 


1 Click the Project tab to bring the Project panel forward. Then, double-click 
an empty area of the Project panel to open the Import File dialog box. 
2 Navigate to the Lessons/Lesson05/Assets folder, and double-click the 


Soundtrack.wav file. 


3 Drag the Soundtrack.wav item from the Project panel into the Balloon Scene 
Timeline panel, placing it at the bottom of the layer stack. 


Preview the movie. The music changes just as the canvas flies off the balloon. 

Go to 18:00, and press N to move the work area end point to the current time. 
Choose Composition > Trim Comp to Work Area. 

Go to 16:00. Expand the Soundtrack.wav layer and the Audio properties. 

Click the stopwatch icon to create an initial keyframe for the Audio Levels value. 
Go to 18:00, and change the Audio Levels value to —40 dB. 


oe On ana uf 


10 Preview the animation, and then save it. 


Congratulations. You’ve just created a complex animation, practicing all kinds 
of After Effects techniques and capabilities along the way. 


Supported audio file formats 


You can import any of the following types of audio files into After Effects: 

e Advanced Audio Coding (AAC, M4A) | 
e Audio Interchange File Format (AIF, AIFF) 

e MP3 (MP3, MPEG, MPG, MPA, MPE) 

e Waveform (WAV) 
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Editing audio files in Adobe Audition 


You can make some very simple changes to audio in After Effects. For more substantial edits, 
use Adobe Audition. Audition is available with a full Adobe Creative Cloud membership. 


You can use Audition to change the length of an audio file, alter its pitch, or change its tempo. 
You can apply effects, record new audio, mix multitrack sessions, and more. 


To edit an audio clip you've used in After Effects, select the file in the Project panel, and choose 
Edit > Edit In Adobe Audition. Then, make your changes in Audition, and save the file. The changes 
you made are automatically reflected in your After Effects project. 


B Adobe Audition 


file Edit Multitrack Qip Effects favorites View Window Help 


Essential Sound 


n aaa e a 


0:00.000 


Lowots 
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Review questions 


1 


How does After Effects display an animation of the Position property? 


2 What is a solid-color layer, and what can you do with it? 


3 What types of audio can you import into an After Effects project? 


Review answers 


1 


When you animate the Position property, After Effects displays the movement 

as a motion path. You can create a motion path for the position of the layer or for 

the anchor point of a layer. A position motion path appears in the Composition panel; 
an anchor-point motion path appears in the Layer panel. The motion path appears 

as a sequence of dots, where each dot marks the position of the layer at each frame. 

A box in the path marks the position of a keyframe. 


You can create solid images of any color or size (up to 30,000 x 30,000 pixels) in 
After Effects. After Effects treats solids as it does any other footage item: You can 
modify the mask, transform properties, and apply effects to the solid layer. If you 
change settings for a solid that is used by more than one layer, you can apply the 
changes to all layers that use the solid or to only the single occurrence of the solid. 
Use solid layers to color a background or create simple graphic images. 


You can import any of the following types of audio files into After Effects: Advanced 
Audio Coding (AAC, M4A), Audio Interchange File Format (AIF, AIFF), MP3 (MP3, 
MPEG, MPG, MPA, MPE), and Waveform (WAV). 
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ANIMATING LAYERS 


Lesson overview 


In this lesson, you'll learn how to do the following: 


Animate a layered Adobe Photoshop file. 

Create an expression using the pick whip. 

Work with imported Photoshop layer styles. 

Apply a track matte to control the visibility of layers. 
Animate a layer using the Corner Pin effect. 


Use time remapping and the Layer panel to dynamically 
retime footage. 


Edit Time Remap keyframes in the Graph Editor. 


This lesson will take about an hour to complete. If you haven't already 


done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


PROJECT: THEATER MARQUEE IN A FILM SHORT 


Animation is all about making changes over time— 
changes to an object or image's position, opacity, scale, 
and other properties. This lesson provides more practice 
animating the layers of a Photoshop file, including 
dynamically remapping time. 


Getting started 


Adobe After Effects provides several tools and effects that let you simulate motion 
video using a layered Photoshop file. In this lesson, you will import a layered 
Photoshop file of a theater marquee, and then animate it to simulate the marquee 
lighting up and text scrolling across its screen. This is a stylized animation in which 
the motion is first accelerated, and then reverses and moves forward again. 


First, you'll preview the final movie and set up the project. 


1 Make sure the following files are in the Lessons/Lesson06 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: marquee.psd 
e Inthe Sample_Movie folder: Lesson06.mp4 


2 Open and play the Lesson06.mp4 in Windows Movies & TV QuickTime Player 
to see the final animation you will create in this lesson. 


3 When youre done, quit Windows Movies & TV or QuickTime Player. You may 
delete the sample movie from your hard disk if you have limited storage space. 


When you begin the lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 


4 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences file. 


5 Click New Project in the Home window. 
After Effects opens to display an empty, untitled project. 
6 Choose File > Save As > Save As. 


7 Inthe Save As dialog box, navigate to the Lessons/Lesson06/Finished_ 
Project folder. 


8 Name the project Lesson06_Finished.aep, and then click Save. 


Importing the footage 
You need to import one source item for this lesson. 


1 Double-click an empty area of the Project panel to open the Import File 
dialog box. 


2 Navigate to the Lessons/Lesson06/Assets folder on your hard disk, and select 
the marquee.psd file. 


3 Choose Composition — Retain Layer Sizes from the Import As menu, so the 
dimensions of each layer will match the layer’s content. (In macOS, you may 
need to click Options to see the Import As menu.) 
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4 Click Import or Open. 


W import File x 
+ v % E > ThisPC > Desktop > Lessons > Lesson06 > Assets v © © Search Assets P 
Organize + New folder =~ m (7) 

a 
a 
a Quick access 
E Desktop + 
$ Downloads + 
F) Documents + 
marquee 
E Pictures A 
Sequence Options: 
Photoshop C Photoshop Sequence 
Import As Force alphabetical order 
Composition -Retain Layer Sizes ~. import Options; 
(C Create Composition 
File name: | marquee -| |All Acceptable Files {v 


Import Folder Ni Cancel 


5 Inthe marquee.psd dialog box, make sure Editable Layer Styles is selected in 
the Layer Options area, and click OK. 


Before continuing, take a moment to study the layers of the file you just imported. 


6 Inthe Project panel, expand the marquee Layers folder to see the Photoshop 
layers. Resize the Name column to make it wider and easier to read, if necessary. 


= 


Project 


marquee v 


marquee.psd x 


Type 
Composition 


~ E marquee Layers Folder 


Lit marquee/marquee.psd Photoshop 
Scroll area/marquee.psd Photoshop 
Scroll text/marquee.psd Photoshop 


Show title/marquee.psd Photoshop 


Starburst/marquee.psd Photoshop 


Unlit marquee/marquee.psd Photoshop 


` 


Each of the elements you'll animate in After Effects—such as the starburst—is on a 
separate layer. In addition, there is one layer representing the initial marquee with 
plain light bulbs (Unlit marquee) and a second layer that represents the final mar- 
quee with the bulbs brightly lit (Lit marquee). 
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After Effects preserves the layer order, transparency data, and layer styles from the 
source Photoshop document. It also preserves other features, such as adjustment 
layers and type, which you don’t happen to be using in this project. 


Preparing layered 
Photoshop files 


Before you import a layered Photoshop file, name its layers carefully to reduce 
preview and rendering time, and to avoid problems importing and updating 
the layers: 


e Organize and name layers. If you change a layer name in a Photoshop file after 
you have imported the file into After Effects, After Effects retains the link to 
the original layer. However, if you delete a layer in a Photoshop file after you 
have imported the file into After Effects, After Effects will be unable to find the 
original layer and will list it as missing in the Project panel. 


e To avoid confusion, make sure that each layer has a unique name. 


Creating the composition 
For this lesson, you'll use the imported Photoshop file as the basis of the composition. 


@ Note: If you don’t 1 Double-click the marquee composition in the Project panel to open it in the 
see the full image, Composition panel and in the Timeline panel. 

choose Fit from the 
Magnification Ratio 
pop-up menu in the 
Composition window. 


44 


yer Name 
Starburst 
Scroll text 
Scroll area 
Show title 
Lit marquee 


b p p ppp 


Unlit marquee 
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2 Choose Composition > Composition Settings. 


3 Inthe Composition Settings dialog box, change the Duration to 10:00 to make 
the composition 10 seconds long, and then click OK. 


Composition Settings x 


00;00;00 
0,00;10;00 


a 


Simulating lighting changes 


The first part of the animation involves lighting the marquee. You'll use Opacity 
keyframes to animate the light. 


1 Go to 4:00. 


Currently, the lit background is on top of the regular (unlit) background, 
obscuring it so the initial frame of the animation is bright. However, you want 

the marquee to appear dark and then lighten. To accomplish this, you will make the 
Lit marquee layer initially transparent, and then animate its opacity so that the lights 
appear to turn on over time. 
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2 Select the Lit marquee layer in the Timeline panel, and press T to reveal 
its Opacity property. 


3 Click the stopwatch icon (6) to set an Opacity keyframe. Note that the Opacity 
value is 100%. 


Starburst 


Scroll text 

Scroll area 

Show title Ẹ 
t Opadty 

Unlit marquee 


4 Press the Home key or drag the current-time indicator to 0:00. Then set the 
Opacity for the Lit marquee layer to 0%. After Effects adds a keyframe. 


marquee 


Starburst 

Scroll text 

Scroll area 

Show title SP 
tv Opacity 

Unlit marquee 


Now, when the animation begins, the Lit marquee layer is transparent, which allows 
the Unlit marquee layer to show through. 


5 Click the Play/Pause button (P) in the Preview panel, or press the spacebar, 
to preview the animation. 


The bulbs around the marquee transition until they are brightly lit. 
6 Press the spacebar to stop playback at any time after 4:00. 


7 Choose File > Save. 
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Duplicating an animation using the pick whip 


The Starburst layer includes the Bevel And Emboss layer style from Photoshop. 
You'll animate the bevel, which makes the starburst appear backlit, so that it lights 
up as the marquee does. 


To do this, you'll use the pick whip to duplicate the animation you just created. You 
can use the pick whip to create expressions that link the values of one property or 
effect to another. In this case, you'll link the opacity of the Lit marquee layer to the 
Depth property of the Bevel And Emboss effect in the Starburst layer. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Expand the Starburst layer, and then expand its Layer Styles > Bevel And 


Emboss properties. 


3 Ifnecessary, enlarge the Timeline panel so that you can see the Lit marquee and 
Starburst properties. 


4 Make sure the Opacity property is still visible for the Lit marquee layer. 
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5 Click the pick whip icon (Œ) on the Depth property name for the Starburst layer, 
and drag it to the Opacity property for the Lit marquee layer. When you release the 
mouse, the pick whip snaps, and the Depth property is red. 


0;00;00;00 


opea $- 
o gı 


£1 Scroll text 
£1 Scroll area 


0;00;00;00 


oe âû & 
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6 Expand the Depth property for the Starburst layer. An expression in the Starburst 
layer time ruler now reads “thisComp.layer("Lit marquee").transform.opacity.’ 
This means that the Opacity value for the Lit marquee layer replaces the 
previous Depth value (105%) for the Starburst layer. 
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7 Drag the current-time indicator from 0:00 to 4:00. Notice that the Opacity value 
for the Lit marquee layer and the Depth property for the Starburst layer match. 


The area around the starburst and the marquee light bulbs brighten in sync. 


8 Hide the properties for all layers to keep the Timeline panel tidy. If you enlarged 
the Timeline panel, return it to its original size 


9 Choose File > Save to save your project. 


About Photoshop layer styles 


Adobe Photoshop provides a variety of layer styles—such as shadows, glows, 
and bevels—that change the appearance of a layer. After Effects can preserve 
these layer styles when you import Photoshop layers. You can also apply layer 
styles in After Effects. 


Though layer styles are referred to as effects in Photoshop, they behave more like 
blending modes in After Effects. Layer styles follow transformations in the standard 
render order, whereas effects precede transformations. Another difference is that 
each layer style blends directly with the underlying layers in the composition, 
whereas an effect is rendered on the layer to which it’s applied, the result of which 
then interacts with the underlying layers as a whole. 


The layer style properties are available for the layer in the Timeline panel. 


To learn more about working with layer styles in After Effects, see After Effects Help. 
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About expressions 


When you want to create and link complex animations, such as multiple car 
wheels spinning, but want to avoid creating tens or hundreds of keyframes by 
hand, you can use expressions instead. With expressions, you can create relation- 
ships between layer properties and use one property’s keyframes to dynamically 
animate another layer. For example, if you set rotation keyframes for a layer and 
then apply the Drop Shadow effect, you can use an expression to link the Rotation 
property's values with the Drop Shadow effect’s Direction values; that way, the drop 
shadow changes with the layer as it rotates. 


You work with expressions in the Timeline panel or the Effect Controls panel. You 
can use the pick whip to create expressions, or you can enter and edit expressions 
manually in the expression field—a text field in the time graph under the property. 


Expressions are based on the JavaScript language, but you don’t need to know 
JavaScript to use them. You can create expressions using the pick whip, by using 
simple examples and modifying them to suit your needs, or by chaining objects and 
methods together. 


For more information about expressions, see After Effects Help. 


Using a track matte to confine animation 


Text should scroll across the bottom of the marquee, but only in the black field. 
You'll animate the text, and then create a track matte to confine it to the designated 
area, so that it appears to be an electronic ticker. 


Animating the text 


The text should start scrolling after the marquee lights up, and it should continue 
scrolling until the end of the clip. 


1 Inthe Timeline panel, select the Scroll text layer. 
2 Goto 4:10. 
3 Press Alt+[ (Windows) or Option+[ (macOS) to set the In point to 4:10. 


Starburst 
Scroll text 


Scroll area 


The text will appear on screen at 4:10, shortly after the marquee is fully lit. 
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4 With the Scroll text layer selected, press P to reveal its Position property. 
5 Change the Position property to 4994,1154. 
Only the first character of the text appears in the black ticker area. 


6 Click the stopwatch icon (6) to create an initial keyframe. 


marquee = 


| © oea > + Layer Name 
C Starburst 


7 Go to 9:29, the last frame in the clip. 
8 Change the Position property to 462, 2108. 


marquee 


oe â > - Layer Name 


Starburst 


After Effects creates a keyframe. The last character in the text is visible in the ticker field. 


9 Press the spacebar to preview the scrolling text. Press the spacebar again to end 
the preview. 


Creating the track matte 


The text scrolls well, but it overlaps the rest of the marquee, and even the lights on 
the left side. You'll use a track matte to confine the text to the black ticker field. To 
do that, you'll duplicate the Scroll area layer and use its alpha channel. 


1 Inthe Timeline panel, select the Scroll area layer. 
2 Choose Edit > Duplicate. 


3 Drag the duplicate layer, Scroll area 2, up in the layer stack so that it’s above the 
Scroll text layer. 


ofpe $: 
o Starburst 


o 


Scroll text 


4 ositio 
Scroll area 
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4 Click Toggle Switches/Modes at the bottom of the Timeline panel to display 
the TrkMat column, so you can apply the track matte. 


5 Select the Scroll text layer, and choose Alpha Matte “Scroll area 2” from 
the TrkMat pop-up menu. 


Starburst Norma 
Scroll area 2 Norma 
Scroll text Norma 
Position Fe No Track Matte 
Alpha Inverted Matte “Scroll area 2” N 
Luma Matte “Scroll area 2” 
Luma Inverted Matte “Scroll area 2" 


The alpha channel of the layer above (Scroll area 2) is used to set transparency 
for the Scroll text layer, so the contents of that layer appear only within the area 
defined by the Scroll area layer. 


6 Deselect all layers, and hide all layer properties. 


7 Press the Home key or move the current-time indicator to the beginning 
of the time ruler, and then press the spacebar to preview the animation. Press 


the spacebar again when you're done. 


8 Choose File > Save to save your project. 
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About track mattes and 
traveling mattes 


When you want one layer to show through a hole in another layer, set up a track 
matte. You'll need two layers—one to act as a matte, the other to fill the hole in 
the matte. You can animate either the track matte layer or the fill layer. When you 
animate the track matte layer, you create a traveling matte. If you want to animate 
the track matte and fill layers using identical settings, you can precompose them. 


You define transparency in a track matte using values from either its alpha channel or 
the luminance of its pixels. Using luminance is handy when you want to create a track 
matte from a layer without an alpha channel, or a layer imported from a program 
that can’t create an alpha channel. In both alpha-channel mattes and luminance 
mattes, pixels with higher values are more transparent. In most cases, you use a 
high-contrast matte so that areas are either completely transparent or completely 
opaque. Intermediate shades should appear only where you want partial or gradual 
transparency, such as along a soft edge. 


After Effects preserves the order of a layer and its track matte after you duplicate 
or split the layer. Within the duplicated or split layers, the track matte layer remains 
on top of the fill layer. For example, if your project contains layers X and Y, where 

X is the track matte and Y the fill layer, duplicating or splitting both of these layers 
results in the layer order XYXY. 


A B c 


Anatomy of a traveling matte 


A. Track matte layer: A solid with a rectangular mask, set to Luma Matte. The mask is animated 
to travel across the screen. 


B. Fill layer: A solid with a pattern effect. 


C. Result: The pattern is seen in the track matte’s shape and added to the image layer, which 
is below the track matte layer. 
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Adding motion blur 


The text’s movement will look more authentic if it includes motion blur. You'll add 
the motion blur and then set the shutter angle and phase, which control the intensity 
of the blur. 


1 Go to 8:00, so you can see the scrolling text well. 
2 Click Toggle Switches/Modes at the bottom of the Timeline panel. 
3 Click the Motion Blur (®) switch for the Scroll text layer. 


After Effects enables Motion Blur for the entire composition, and the text layer 
appears less sharp in the Composition panel. 


4 Choose Composition > Composition Settings. 


5 Inthe Composition Settings dialog box, click the Advanced tab, and reduce 
the Shutter Angle to 90 degrees. 


The Shutter Angle setting imitates the effect of adjusting a shutter angle on a real 
camera, which controls how long the camera aperture is open, gathering light. 
Larger values create more motion blur. 


6 Change the Shutter Phase to 0 degrees, and then click OK. 


Composition Settings x 
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Animating using the Corner Pin effect 


The marquee is looking pretty good, but the starburst isn’t terribly noticeable. You'll 
use the Corner Pin effect to distort it over time and draw attention to it. 


Using the Corner Pin effect is similar to animating with the Photoshop Free Transform 
tool—the effect distorts an image by repositioning each of its four corners. You can use 
it to stretch, shrink, skew, or twist an image, or to simulate perspective or movement 
that pivots from the edge of a layer, such as a door opening. 


1 Go to 4:00. 


2 Inthe Timeline panel, click the Solo switch (@) for both the Show title and 
Starburst layers. 


ayer Name 


Starburst 


+] Scroll area 2 
Scroll text 
£] Scroll area 
£] Show title 
Lit marquee 
Unlit marquee 


yaunus wunen" 
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Soloing the layers isolates them to speed animating, previewing, and rendering. 


3 Select the Starburst layer in the Timeline panel, and then choose Effect > 
Distort > Corner Pin. Small circles appear around the corner points of the 
Starburst layer in the Composition panel. 


You'll start by creating initial keyframes at their current locations. 
4 Inthe Effect Controls panel, click the stopwatch icon (ð) next to each of 


the pins—Upper Left, Upper Right, Lower Left, and Lower Right—to set 
initial keyframes. 


© Note: If you don't 
see the controls, choose 
View Options from the 
Composition panel 
menu. In the View 
Options dialog box, 
select the Handles and 
Effect Controls options, 
and then click OK. 
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5 Go to 6:00, and then drag each of the four corner-pin handles outward. With 
the Corner Pin tool, you can move each handle a different amount. Notice that 
the x and y coordinates update in the Effect Controls panel. After Effects adds 
keyframes. 


Instead of dragging the handles, you can manually enter the values shown 
in the following figure. 


narquee « Starbu 


fx Corner Pin 


6 Go to 8:00, and then drag the corner-pin handles so that the text is tilted at an 
angle. Your corner-pin locations should be similar to those in the figure below. 
After Effects adds keyframes. 


7 Press the Home key or move the current-time indicator to the beginning of the 
time ruler. Press the spacebar to preview the animation. When you're done, press 
the spacebar again. 


8 Click the Solo switches (@) for the Show title and Starburst layers to restore 
the view of the other layers. 


9 Go to 0:00, and then press the spacebar to preview the entire animation, 
including the corner-pin effect. When you're done, press the spacebar again. 
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10 Choose File > Save to save your project. 


Simulating a darkening sky 


The lights come on, but the sky and building remain in daylight. The background 
should darken as the marquee lights up, showing off the marquee contents and 
creating a sense of excitement. You'll use a mask, a solid layer, and a blending mode 
to provide the contrast. 


Creating a mask 


You want darkness to fall on the building and sky behind the theater sign. You'll 
duplicate the layer, and then create a mask to isolate the area you want to darken. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Inthe Timeline panel, select the Lit marquee layer. 


3 Choose Edit > Duplicate. After Effects adds a Lit marquee 2 layer to the layer 
stack, immediately above the Lit marquee layer. 


4 Select the Pen tool (Ø) in the Tools panel. 
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5 With the Lit marquee 2 layer selected in the Timeline panel, click the upper 
left corner of the marquee to start drawing. 


marquee = 


ty 


Layer Name 
Starburst 
©) Scroll area 2 

Scroll text 

Scroll area 
Show title 
Lit marquee 
Unlit marquee 


Ð Ð PPP 
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p 


6 Click additional points to continue the mask around the left edge of the 
marquee, the left and upper edge of the background, and the theatre sign, 
as in the image below. You'll need to create some points of the mask on the 
pasteboard outside the image. 


7 Continue around the theatre sign, and then click your starting point again 
to close the mask. 
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Adding a solid layer 


Now that you've masked the background, you'll add the layer that will affect 
it, and then animate the opacity of that layer. 


1 Select the Lit marquee layer in the Timeline panel. 
2 Choose Layer > New > Solid. 


3 Inthe Solid Settings dialog box, make sure a dark gray color is selected, click 
Make Comp Size, and then click OK. After Effects adds a layer named Dark 
Gray Solid 1 between the Lit marquee and Lit marquee 2 layers. 


marquee = 


ope 8 > + Layer Name 

Starburst 

e) Scroll area 2 
Scroll text 

Scroll area 

Show title 

Lit marquee 2 

[Dark Gray Solid 1) | 

Lit marquee 

Unlit marquee 


SPDPDDPDDDBDBAB 


oon aona wne 


With the current-time indicator at the beginning of the time ruler, most of the image 
will darken, because neither the Lit marquee layer nor the Lit marquee 2 layer (with 
its mask) are visible yet. Don’t worry; you'll animate the solid layer’s opacity to 
account for that. 


4 Select the Lit marquee 2 layer, and press M if the Mask property isn't already 
displayed. 
5 Choose Darken from the Mask Mode menu, and select Inverted. 


You drew around the background, but that’s the area you want to remain unmasked. 
When you invert the mask, the unselected area becomes masked instead. 


marquee 
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ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 163 


Select the Dark Gray Solid layer, and press T to display its Opacity property. 


Make sure the current-time indicator is at the beginning of the time ruler 
(0:00). Then, change the Opacity to 0%, and click the stopwatch icon (ð) 
to create an initial keyframe. 


marquee 
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Go to 1:23, and change the Opacity to 5%. 


Go to 4:09, and click the Add Or Remove Keyframe button to create 
an additional keyframe with Opacity at 5%. 
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11 Press the Home key or move the current-time indicator to the beginning of the time 
ruler. Press the spacebar to preview the animation. When youre done, press the 


spacebar again. 


As the lights brighten and the text begins to move, the surrounding building 
and sky gradually darken. Your scene is complete. 


Retiming the composition 


So far, you have created a straightforward time-lapse simulation. That’s fine, but > Tip: You can get 
even finer control with 
the Timewarp effect, 
which you'll use in 
You can also use it to do things like create a freeze-frame result. The Graph Editor Lesson 14, “Advanced 


After Effects offers more ways to play with time using the time-remapping feature. 
Time remapping lets you dynamically speed up, slow down, stop, or reverse footage. 


and the Layer panel are a big help when remapping time, as you'll see in the follow- Editing Techniques." 
ing exercise, when you retime the project so that the time-lapse speed changes over 
the course of the movie. 


Pre-composing layers 


For this exercise, you'll duplicate the composition and then precompose the layers, 
which will be easier to remap than the original. 


1 Select the marquee composition in the Project panel, and choose Edit > 
Duplicate. 


A marquee 2 composition appears in the Project panel. 
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2 Double-click the marquee 2 composition to open it in the Composition 
and Timeline panels. 


marquee 2 v 
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3 Inthe marquee 2 Timeline panel, select the Starburst layer and then Shift-select 
the Unlit marquee layer, so that all the layers are selected. 


4 Choose Layer > Pre-compose. 


5 Inthe Pre-compose dialog box, make sure Move All Attributes Into The New 
Composition is selected, and then click OK. 
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After Effects creates a new composition named Pre-comp 1, which replaces the layers 
you selected in the marquee 2 composition. Now you can remap all of the elements 
of the project at once. 


Remapping time 
You're ready to manipulate the speed and direction of time in your project. 


1 With the Pre-comp 1 layer selected in the Timeline panel, choose Layer > Time > 


Enable Time Remapping. 


After Effects adds two keyframes, at the first and last frames of the layer, visible 
in the time ruler. A Time Remap property also appears under the layer name 

in the Timeline panel; this property lets you control which frame is displayed 

at a given point in time. 


2 With the Pre-comp 1 layer active, choose Layer > Open Layer to open 
it in the Layer panel. 
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The Layer panel provides a visual reference of the frames you change when you 
remap time. It displays two time rulers: The time ruler at the bottom of the panel 
displays the current time. The Source Time ruler, just above the time ruler, has 

a remap-time marker that indicates which frame is playing at the current time. 


3 Press the spacebar to preview the layer, and notice that the source-time and 
current-time markers in the two Layer panel rulers are synchronized. That will 
change as you remap time. 


Over the first four seconds, the lights come on slowly. You'll speed that section up 
so that the lights come on twice as fast. 


4 Go to 2:00, and change the Time Remap value to 4:00. 


This remaps time so that frame 4:00 plays at 2:00. In other words, the clip now plays 
back at twice the speed for the first two seconds of the composition. 


oe | 


Source Name 
T HPre-comp 1 + 


Time Remap 


5 Press the spacebar to preview the animation. The composition now runs at double- 
speed until 2:00, and at a slower speed thereafter. Press the spacebar again when 
you have finished previewing the animation. 


Viewing time remapping in the Graph Editor 


Using the Graph Editor, you can view and manipulate all aspects of effects and ani- 
mations, including effect property values, keyframes, and interpolation. The Graph 
Editor displays changes in effects and animations as a two-dimensional graph, with 
playback time represented horizontally (from left to right). In layer bar mode, 

in contrast, the time ruler represents only the horizontal time element, without 

a graphical display of changing values. 


1 Make sure the Time Remap property is selected for the Pre-comp 1 layer in the 
Timeline panel. 


2 Click the Graph Editor button (®&) to display the Graph Editor. 
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10 seconds 


The Graph Editor displays a time-remap graph that shows a white line connecting 
the keyframes at 0:00, 2:00, and 10:00. The angle of the line is steep up to 2:00, and 
then becomes shallower. The steeper the line, the faster the playback time. 


Using the Graph Editor to remap time 


When remapping time, you can use the values in the time-remap graph to determine 
and control which frame of the movie plays at which point in time. Each Time Remap 
keyframe has a time value associated with it that corresponds to a specific frame 

in the layer; this value is represented vertically on the time-remap graph. When you 
enable time remapping for a layer, After Effects adds a Time Remap keyframe at the 
start and end points of the layer. These initial Time Remap keyframes have vertical 
time values equal to their horizontal positions. 


By setting additional Time Remap keyframes, you can create complex motion effects. 
Every time you add a Time Remap keyframe, you create another point at which you 
can change the playback speed or direction. As you move the keyframe up or down 
in the time-remap graph, you adjust which frame of the video is set to play at the 
current time. 
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You'll have some fun with the timing of this project. 


> Tip: Watch the Info 1 Select the Selection tool in the Tools panel. 
panel as you drag to see i , 

more information as you 2 Inthe Timeline panel, go to 3:00. 

adjust the keyframe. 


3 Inthe time-remap graph, Ctrl-click (Windows) or Command-click (macOS) 
the line at 3:00 to create a new keyframe. 


10 seconds 


10 seconds 


0;00;03;00 (A 0;00;00;00) 
B 0.00 seconds (A -4,75) 
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5 Go to 0:00, and then press the spacebar to preview the results. Watch the time 
ruler and Source Time ruler in the Layer panel to see which frames are playing 
at any given point in time. 


The animation progresses rapidly over the first two seconds of the composition, 
and then plays in reverse for a second, and the lights go out. The entire animation 
plays again. 


6 Press the spacebar to stop the preview. 


Having fun yet? Keep going. You'll adjust the timing so that the lights blink twice 
before coming on permanently. 


7 Drag the keyframe from 2:00 to 1:00, so that the lights come on in the first 
second. Then move the next keyframe to 2:00, so that the lights blink off. 


10 seconds 


Shifting the keyframe affects the timing for the rest of the clip as well. Currently, 
it’s set to play the 10-second point in the composition at ten seconds, so the angle 
of speed adjusts accordingly. 


You'll set the lights to blink one more time before continuing the animation. Notice 
how the angle for the rest of the animation changes as a result; it becomes steeper 
because there is more animation to cover in less time. 
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Tip: You can scale 
the entire animation 
in time: Click the Time 
Remap property name 
to select all of its 
keyframes, so that you 
see a free-transform 
selection box. Then 


resize the selection box. 


8 Ctrl-click (Windows) or Command-click (macOS) the line to create additional 
keyframes at 3:00 and 4:00, moving them to the 4-second and 0-second marks, 
respectively, so that the lights blink on and off again before the animation begins 
to play in full. 


@ 
y: 
i 


10 seconds 


9 Press the spacebar to preview the animation, and press it again to stop it. 


The lights blink on and off, but the text scrolls across the ticker too quickly. You'll 
adjust the timing so that it moves more slowly, even though it means the entire text 
won't appear before the end of the clip. 


10 Go to 10:00. Then enter 7:00 for the Time Remap value. 


7.0 seconds 
6.0 
5.0 


40 
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11 Press the Home key or move the current-time indicator to the beginning 
of the time ruler, and then press the spacebar to preview the animation. 
Press the spacebar again when youre done. 


The clip plays for ten seconds, but it ends at the 7-second point in the composition. 
Now the text moves more slowly—and much more realistically—across the ticker. 


12 Choose File > Save to save your work so far. 


Adding Easy Ease 
You'll soften the shift in time that occurs when the lights blink with Easy Ease. 


1 Click to select the keyframe at 1:00, and then click the Easy Ease 
icon (7°) at the bottom of the Graph Editor. This slows the shift into 
reverse so that the lights stay bright just a little longer. 


2 Click to select the keyframe at 3:00, and apply Easy Ease for the same effect. 


7.0 seconds 


6.0 


Notice that there are Bezier handles where you added ease. You can refine the 
amount of ease on a transition further by dragging the Bezier handle. If you drag 
the handle further from the keyframe, the transition is softer; if you drag it down or 
closer to the keyframe, the transition is more pronounced. 
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3 Go to the beginning of the time ruler, and preview the entire movie. 


4 Choose File > Save to save the final project. 


Congratulations. You’ve completed a complex animation, including shifts in time. 
You can render and export the time-remap project if you'd like. See Lesson 15, 
“Rendering and Outputting,’ for detailed instructions on rendering and exporting 
a composition. 
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Review questions 


A WwW N 


Why would you import a layered Photoshop file as a composition? 
What is the pick whip, and how do you use it? 
What is a track matte, and how do you use it? 


How do you remap time in After Effects? 


Review answers 


1 


When you import a layered Photoshop file into After Effects as a composition, 
After Effects preserves the layer order, transparency data, and layer styles from the 
source Photoshop document. It also preserves other features, such as adjustment 
layers and type. 


The pick whip creates expressions that link the values of one property or effect to another 
layer. The pick whip is also a way to create parenting relationships. To use the pick whip, 
simply drag the pick whip icon from one property to another. 


When you want one layer to show through a hole in another layer, you can use a track 
matte. To create a track matte, you need two layers: one to act as a matte, and another 
to fill the hole in the matte. You can animate either the track matte layer or the fill layer. 
When you animate the track matte layer, you create a traveling matte. 


There are several ways to remap time in After Effects. Time remapping lets you 
dynamically speed up, slow down, stop, or reverse footage. When remapping time, 
you can use the values in the time-remap graph in the Graph Editor to determine 

and control which frame of the movie plays at which point in time. When you enable 
time remapping for a layer, After Effects adds a Time Remap keyframe at the start and 
end points of the layer. By setting additional Time Remap keyframes, you can create 
complex motion effects. Every time you add a Time Remap keyframe, you create 
another point at which you can change the playback speed or direction. 
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WORKING WITH MASKS 


Lesson overview 


In this lesson, you'll learn how to do the following: 


Create a mask using the Pen tool. 

Change a mask’s mode. 

Edit a mask shape by controlling vertices and direction handles. 
Feather a mask edge. 

Replace the contents of a mask shape. 


Adjust the position of a layer in 3D space to blend it with the rest 
of a shot. 


Create a reflection effect. 
Modify a mask using the Mask Feather tool. 


Create a vignette. 


This lesson will take about an hour to complete. If you haven't already 


done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


mr, 
ron, 


PROJECT: SEQUENCE FROM A COMMERCIAL 


There will be times when you won't need (or want) 
everything in a shot to be included in the final 
composite. Use masks to control what appears. 


About masks 


A mask in Adobe After Effects is a path, or outline, that is used to modify layer 
effects and properties. The most common use of masks is to modify a layer’s alpha 
channel. A mask consists of segments and vertices: Segments are the lines or curves 
that connect vertices. Vertices define where each segment of a path starts and ends. 


A mask can be either an open or a closed path. An open path has a beginning point 
that is not the same as its end point; for example, a straight line is an open path. 

A closed path is continuous and has no beginning or end, such as a circle. Closed- 
path masks can create transparent areas for a layer. Open paths cannot create 
transparent areas for a layer, but are useful as parameters for an effect. For example, 
you can use an effect to generate a running light around a mask. 


A mask belongs to a specific layer. Each layer can contain multiple masks. 


You can draw masks in common geometric shapes—including polygons, 
ellipses, and stars—with the shape tools, or you can use the Pen tool to draw 
an arbitrary path. 


Getting started 


In this lesson, you will create a mask for the screen of a television and replace the 
screen's original content with a movie. Then you'll adjust the positioning of the new 
footage so that it fits the perspective of the shot. Finally, you'll polish the scene by 
adding a reflection, creating a vignette effect, and adjusting the color. 


Begin by previewing the movie and setting up the project. 


1 Make sure the following files are in the Lessons/Lesson07 folder on your hard 
disk, or download them from www.adobepress.com now: 


e In the Assets folder: Turtle.mov, Watching_TV.mov 
e Inthe Sample_Movies folder: Lesson07.avi, Lesson07.mov 


2 Open and play the Lesson07.avi sample movie in Windows Movies & TV or the 
Lesson07.mov sample movie in QuickTime Player to see what you will create 
in this lesson. When you are done, close Windows Movies & TV or QuickTime 
Player. You may delete the sample movies from your hard disk if you have limited 
storage space. 


When you begin the lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 
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3 Start After Effects, and then immediately hold down Ctrl+Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. Click New Project in the 
Home window. 


After Effects opens to display a new, untitled project. 


4 Choose File > Save As > Save As, and navigate to the Lessons/Lesson07/ 
Finished_Project folder. 


5 Name the project Lesson07_Finished.aep, and then click Save. 


Creating the composition 


You'll import two footage items for this exercise. Then, you'll create the composition 
based on the aspect ratio and duration of one of the footage items. 


1 Double-click an empty area of the Project panel to open the Import File dialog box. 


2 Navigate to the Lessons/Lesson07/Assets folder, Shift-click to select the Turtle.mov 
and Watching_TV.mov files, and then click Import or Open. 


3 Select the Watching_TV.mov footage item in the Project panel, and drag it onto 
the Create A New Composition button (Œ) at the bottom of the panel. 


After Effects creates a composition named Watching_T’V, and opens it in the 
Composition and Timeline panels. 


4 Choose File > Save to save your work so far. 
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Creating a mask with the Pen tool 


> Tip: You can also The TV screen is currently blank. To fill it with the video of a sea turtle, you need 
create a mask using the to mask the screen. 

Mocha effect. To learn 

more about using the 1 Press the Home key or move the current-time indicator to the beginning 
Mocha effect, see After 


of the time ruler. 
Effects Help. 


2 Zoom in to the Composition panel until the TV screen nearly fills the view. 
You may need to use the Hand tool (W) to reposition the view in the panel. 


3 Make sure the Watching _TV.mov layer is selected in the Timeline panel, and 
then select the Pen tool (ø) in the Tools panel. 


The Pen tool creates straight lines or curved segments. The TV appears to be 
rectangular, so you'll try using straight lines first. 


4 Click the upper left corner of the TV screen to place the first vertex. 


5 Click the upper right corner of the TV screen to place the second vertex. 
After Effects connects the two points with a segment. 


6 Click to place a third vertex in the lower right corner of the TV screen, and then 
click to place a fourth vertex in the lower left corner of the screen. 


7 Move the Pen tool over the first vertex (in the upper left corner). When a circle 
appears next to the pointer (as in the middle image below), click to close the 


mask path. 


Editing a mask 


The mask looks pretty good, but instead of masking the information inside the monitor, 
the mask has removed everything outside the monitor. You need to invert the mask. 
You'll also use Bezier curves to create a more accurate mask. 
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Inverting the mask 


For this project, you need everything inside the mask to be transparent and every- 
thing outside the mask to be opaque. You'll invert the mask now. 


1 Select the Watching _TV.mov layer in the Timeline panel, and press the M key Ð Tip: Pressing the 
to see the Mask Path property for the mask. M key twice in quick 
succession displays all 
There are two ways to invert this mask: by choosing Subtract from the Mask Mode mask properties for the 
pop-up menu, or by selecting the Inverted option. selected layer. 


2 Select the Inverted option for Mask 1. 


Source Name 


=} Watching TV.mov [Ez 
@ Mask 


Mask Path 


The mask inverts. 


3 Press F2 or click an empty area of the Timeline panel to deselect the 
Watching _TV.mov layer. 


If you look closely at the TV, you may see portions of the screen still appearing 
around the edges of the mask. 


Depending on the scene, gaps in the mask may call attention to changes being 
made to the layer, so they need to be fixed. To fix them, you'll change the straight 
lines to subtle curves. 


Creating curved masks 


Curved or freeform masks use Bezier curves to define the shape of the mask. Bezier 
curves give you the greatest control over the shape of the mask. With them, you can 
create straight lines with sharp angles, perfectly smooth curves, or a combination 
of the two. 


1 Inthe Timeline panel, select Mask 1, the mask for the Watching_TV.mov layer. 
Selecting Mask 1 makes the mask active and also selects all the vertices. 


2 Inthe Tools panel, select the Convert Vertex tool (N), which is hidden behind 
the Pen tool. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 181 


> Tip: If you make 

a mistake, press 
Ctrl+Z (Windows) or 
Command+Z (macOS) 


to undo your last action. 


You can also change 
the zoom level and 

use the Hand tool to 
reposition the image in 
the Composition panel 
as you work. 


3 Inthe Composition panel, click any of the vertices. The Convert Vertex 


tool changes the corner vertices to smooth points. 


4 Switch to the Selection tool (>), click anywhere in the Composition panel 
to deselect the mask, and then click the first vertex that you created. 


Two direction handles extend off the smooth point. The angle and length of these 
handles control the shape of the mask. 


5 Drag the right handle of the first vertex around the screen. Notice how this 
changes the shape of the mask. Notice also that the closer you drag the handle 
to another vertex, the less the shape of the path is influenced by the direction 
handle of the first vertex, and the more it is influenced by the direction handle 
of the second vertex. 


Click the vertex. Drag the handle. 


6 Once you are comfortable moving the handles, position the handle of the 
upper left vertex as in the preceding figure. As you have seen, you can create 
very fluid shapes. 
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About mask modes 


Blending modes for masks (mask modes) control how masks within a layer 
interact with one another. By default, all masks are set to Add, which combines 
the transparency values of any masks that overlap on the same layer. You can apply 
one mode to each mask, but you cannot change a mask’s mode over time. 

The first mask you create interacts with the layer’s alpha channel. If that channel 
doesn't define the entire image as opaque, then the mask interacts with the layer 
frame. Each additional mask that you create interacts with masks located above it in 
the Timeline panel. The results of mask modes vary depending on the modes set for 
the masks higher up in the Timeline panel. You can use mask modes only between 
masks in the same layer. Using mask modes, you can create complex mask shapes 
with multiple transparent areas. For example, you can set a mask mode that combines 
masks and sets the opaque area to the regions where the masks intersect. 


| 


Original masks None Add Subtract 
Intersect Lighten Darken Difference 


Breaking direction handles 


By default, the direction handles of any smooth point are connected to one another. 

As you drag one handle, the opposite handle moves as well. However, you can break 
this connection to get greater control over the shape of the mask, and you can create 
sharp points or long, smooth curves. 


1 Select the Convert Vertex tool (N) in the Tools panel. 


2 Drag the right direction handle of the upper left vertex. The left direction 
handle remains stationary. 


3 Adjust the right direction handle until the top segment of the mask shape 
more closely follows the curve of the TV in that corner. 
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4 Drag the left direction handle of the same vertex until the left segment of the shape 


more closely follows the curve of the TV in that corner. 


Drag the right direction handle of the upper left vertex, and then the left direction handle, 
to follow the curve of the TV screen. 


Ð Tip: Again, you may 5 For each of the remaining corner points, click with the Convert Vertex tool, and 
need to adjust your then repeat steps 2—4 until the mask’s shape more closely matches the curvature 


view in the Composition ; : : 
panel asyou work: You of the TV. If you need to shift a corner point, use the Selection tool. 


can drag the image 6 When you're done, deselect the Watching_TV.mov layer in the Timeline panel 
with the Hand tool. To 
temporarily switch to 
the Hand tool, press and 
hold the spacebar. 


to check the edge of your mask. You should not see any of the TV screen. 


N 


Choose File > Save to save your work. 


Creating a Bezier mask 


You used the Convert Vertex tool to change a corner vertex to a smooth point 

with Bezier handles, but you could have created a Bezier mask in the first place. 

To do so, click in the Composition panel with the Pen tool where you want to place 
the first vertex. Then click where you want to place the next vertex, and drag in the 
direction you want to create a curve. When you are satisfied with the curve, release 
the mouse button. Continue to add points until you've created the shape you want. 
Close the mask by either clicking on the first vertex or double-clicking the last 
vertex. Then switch to the Selection tool to refine the mask. 


184 LESSON 7 Working with Masks 


Feathering the edges of a mask 


The mask looks good, but you need to soften the edges a bit. 
1 Choose Composition > Composition Settings. 


2 Click the Background Color box, and choose white for the background color 
(R=255, G=255, B=255). Then click OK to close the Color Picker, and OK again 
to close the Composition Settings dialog box. 


t: Custom 


Square Pixels 


24 


Full 


0:00:00:00 


000:11:17 


The white background allows you to see that the edge of the TV screen looks 
a little too sharp and unrealistic. To address this, you'll feather, or soften, the edges. 


3 Select the Watching_TV.mov layer in the Timeline panel, and press the F key 
to display the Mask Feather property for the mask. 


4 Increase the Mask Feather amount to 1.5, 1.5 pixels. 


$: 


jı B [Watching TV.mov_] P 
Mask 1 Add 
Mask Feather 


5 Hide the properties for the Watching_TV.mov layer, and then choose File > Save 
to save your work. 
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Replacing the content of the mask 


You are now ready to replace the background with the video of a sea turtle and blend 
it with the overall shot. 


B Tip: In effects 
that reference layers, 
you can use masks for 


greater control over the 1 Inthe Project panel, select the Turtle.mov file, and drag it to the Timeline panel, 


effect’s influence. You 
can also use expressions 
to animate mask points. 


® Note: If you're 
using a Mac with Retina 
display, you'll see Fit Up 
To 200%. 


placing it below the Watching_TV.mov layer. 


B Watching_TV.mov 


j=] Turtle mov n i 


Choose Fit Up To 100% from the Magnification Ratio pop-up menu at the bottom 
of the Composition panel so that you can see the whole composition. 


Select the Selection tool (»), and then drag the Turtle.mov layer in the 
Composition panel until the anchor point is centered in the TV screen. 


=e Hi 


If you're using a touch-enabled device, such as a Microsoft Surface, Wacom ~ 
Cintiq Touch, or multi-touch trackpad, you can use your fingers to zoom q 
and pan. Touch gestures let you zoom and pan in the Composition, Layer, Footage, 

and Timeline panels. 

To zoom: Pinch two fingers closer together to zoom in, or move them further apart 

to zoom out. 

To pan: Move two fingers in unison to pan up, down, left, or right in the panel's 

current view. 
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Repositioning and resizing the clip 


The sea turtle clip is too big for the TV screen, so you'll resize it as a 3D layer, which 
will give you more control over its shape and size. 


1 With the Turtle.mov layer selected in the Timeline panel, click the 3D switch (®) 
for the layer. 


2 Press the P key to show the Position property for the Turtle.mov layer. 


+ 
B Watching_TV.mov + 


B[furtiemoy ) F 


Position 


The Position property for a 3D layer has three values: From left to right, they @ Note: You'll learn 
represent the x, y, and z axes of the image. The z axis controls the depth of the more about 3D layers 
in Lessons 12, “Using 
3D Features,” and 13, 
“Working with the 3D 
Camera Tracker.’ 


layer. You can see these axes represented in the Composition panel. 


3 Make sure the Selection tool is selected, and then position the pointer in the 
Composition panel over the blue cube where the red and green arrows meet 
so that a small z appears. 


4 Drag down and to the right to increase the depth of field, so that the Turtle.mov 
layer appears smaller. 


5 Position the pointer in the Composition panel over the red arrow so that a small 
x appears. The red arrow controls the x (horizontal) axis of the layer. Drag left 
or right as necessary to center the clip horizontally in the monitor screen. 


6 Position the pointer in the Composition panel over the green arrow so that 
a small y appears. Then drag up or down as necessary to position the clip 
vertically in the monitor screen. 


7 Continue to drag the x, y, and z axes until the entire clip fits into the TV screen, > Tip: You can also 
as shown in the following image. enter the Position 
values directly in the 
Timeline panel instead 
of dragging in the 
Composition panel. 


S 


B Watching_TV.mov 


D [furtiemoy dF 


Position 
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Rotating the clip 
The video clip fits better, but you need to rotate it slightly to improve the perspective. 


1 Select the Turtle.mov layer in the Timeline panel, and press the R key to reveal 
its Rotation properties. 


Again, since this is a 3D layer, you can control rotation on the x, y, and z axes. 


2 Change the X Rotation value to 1 degree and the Y Rotation value to -40 
degrees. This swivels the layer to match the perspective of the TV screen. 


3 Change the Z Rotation value to 1 degree to align the layer with the TV screen. 


B Watching TV.mov 


B Munem ) ¢ 


Your composition should now resemble the preceding image. 


4 Hide the properties for the Turtle.mov layer, and then choose File > Save to save 
your work. 


Adding a reflection 


The masked image looks convincing, but you can make it look even more realistic 
by adding a reflection to the TV screen. 


1 Click an empty area in the 
Timeline panel to deselect 
all layers, and then choose 
Layer > New > Solid. 

2 Inthe Solid Settings dialog box, oe 
name the layer Reflection, click a relies 

the Make Comp Size button, 

change the Color to white, and 
then click OK. 
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Instead of trying to exactly re-create the shape of the Watching_TV.mov layer’s 
mask, it is easier to copy it to the Reflection layer. 


3 Select the Watching _TV.mov layer in the Timeline panel, and press the M key 
to display the Mask Path property for the mask. 


4 Select Mask 1, and then choose Edit > Copy or press Ctrl+C (Windows) 
or Command+C (macOS). 


5 Select the Reflection layer in the Timeline panel, and then choose Edit > Paste 


or press Ctrl+V (Windows) or Command+V (macOS). 


sk Path 
B Watching_TV.mov 


This time, you want to keep the area inside the mask opaque and make the area outside 
the mask transparent. 


6 Select the Watching _TV.mov layer, and then press U to hide the mask 
properties. 


7 Select the Reflection layer in the Timeline panel, and press the F key to reveal 
the Mask 1 Mask Feather property for the layer. 


8 Change the Mask Feather value to 0 (zero). 


9 Deselect the Inverted option. The Reflection layer now obscures the 
Turtle.mov layer. 


Source Name 


5 
@ Maski Add 
Mask Feather 
B Watching_TV.mov 


10 Zoom in to see the screen, and then select the Mask Feather tool (/), hidden 
beneath the Convert Vertex tool (N) in the Tools panel. 


The Mask Feather property adjusts the width of the feather the same amount all the 
way around the mask. However, the Mask Feather tool lets you vary the feathering 
width at points you define on the closed mask. 
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11 Click the Reflection layer in the Timeline panel to select it. Then click the lower 
left vertex to create a feather point. 


12 Click the feather point again, and without releasing the mouse button, drag that 
feather point inward so that only the center of the screen is reflected, and so 


that the feather point is positioned as shown in the image below. 


Currently the feather extends evenly across the mask. You'll add more feather points 
for greater flexibility. 


13 Click in the center of the top of the mask to create another feather point. Then 
drag the feather point down slightly, into the mask. 


14 Right-click or Control-click the feather point you just created, and choose Edit 
Radius. Change the Feather Radius to 0, and click OK. 


Edit Radius. (-8.68) 


X 


This is a good start, but the sides slope in too sharply. You'll add more feather 
points to change the angle. 
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15 Add another feather point by clicking the left edge of the mask, about one-third 
of the way from the top. 


16 Add a similar feather point on the right side. 


The shape of the reflection is good, but it’s obscuring the image. You'll change 
the opacity to reduce its effect. 


17 Select the Reflection layer in the Timeline panel, and then press the T key 
to reveal the Opacity property. Change its value to 10%. 


B Watching_TV.mov 
B Turtle.mov 


18 Press T to hide the Opacity property, and then press F2 or click an empty area 
in the Timeline panel to deselect all layers. 


Applying a blending mode 


To create unique interactions between layers, you may want to experiment with 
blending modes. Blending modes control how each layer blends with, or reacts to, 
layers beneath it. Blending modes for layers in After Effects are identical to blending 
modes in Adobe Photoshop. 
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1 From the Timeline panel menu, choose Columns > Modes to display the Mode 
pop-up menu. 


2 Choose Add from the Reflection layer’s Mode pop-up menu. 


@ Reflection 
B Watching_TV.mov 
B Turtle.mov 


This creates a hard glare on the TV screen image and boosts the colors underneath. 


3 Choose File > Save to save your work. 


Creating a vignette 


A popular effect in motion graphic design is to apply a vignette to the composition. 
This is often done to simulate light variations of a glass lens. It creates an interesting 
look that focuses the attention on the subject and sets the shot apart. 


1 Zoom out to see the whole image. 


2 Click an empty area in the 
Timeline panel to deselect all 
layers, and then choose Layer > 


New > Solid. 
3 Inthe Solid Settings dialog box, nits: pbæls 
name this layer Vignette, click Pixel Aspect Ratio: Square Pixels 


the Make Comp Size button, 
change the Color to black (R=0, 
G=0, B=0), and then click OK. 


In addition to the Pen tool, After 
Effects provides tools that let you 
easily create square and elliptical 
masks. 


192 LESSON7 Working with Masks 


4 Inthe Tools panel, select the Ellipse tool (@), hidden behind the Rectangle tool (H). 


5 Inthe Composition panel, position the cross-hairs pointer in the upper left 
corner of the image. Drag to the opposite corner to create an elliptical shape 
that fills the image. Adjust the shape and position using the Selection tool, if 
necessary. 


6 Expand the Mask 1 property in the Vignette layer to display all of the mask 
properties for the layer. 


7 Choose Subtract from the Mask 1 Mode pop-up menu. 


8 Increase the Mask Feather amount to 200, 200 pixels. 


Your composition should now resemble the following figure. 


Mask 1 
D Mask Path 


Mask Feather 


Even with this large feather amount, the vignette is a bit intense and constricting. 
You can give the composition more breathing room by adjusting the Mask Expansion 
property. The Mask Expansion property represents, in pixels, how far from the 
original mask edge you are expanding or contracting the adjusted edge. 


9 Increase Mask Expansion to 90 pixels. 


[Vignette S 


Mask 1 


Mask Expansion 


10 Hide the properties for the Vignette layer, and then choose File > Save. 
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Using the Rectangle and 
Ellipse tools 


The Rectangle tool, as the name suggests, creates a rectangle or square. The Ellipse 
tool creates an ellipse or circle. You create mask shapes with these tools by dragging 
them in the Composition or Layer panel. 

If you want to draw a perfect square or circle, press the Shift key as you drag with 
the Rectangle tool or the Ellipse tool. To create your mask from the center, press 

Ctrl (Windows) or Command (macOS) after you start to drag. Press Ctrl+Shift or 
Command+Shift after you start to drag to create a perfect square or circle mask 
from a center anchor point. 

Be careful! If you use these tools without a layer selected, you'll draw a shape, not 

a mask. 


Adjusting the timing 


The sea turtle video shouldn't appear until the girl turns on the TV. You'll adjust 
the Turtle.mov layer’s start point and animate the mask accordingly. 


1 


Go to 2:00, and then drag the entire Turtle.mov layer to the right so that the layer 
begins at 2:00. 


Select the Watching _TV.mov layer, and press MM to see the mask properties. 
Click the stopwatch icon next to Mask Expansion to create a keyframe at 2:00. 


Go to 1:23, and change the Mask Expansion value to —150 pixels to reveal 
the blank TV screen. 


E Reflection + 
D [Watching Tv.mov_] 
E Maskı Add 
: k Path 
k Fe 


Q 
Vignette >. 
R 
Q 


(Mask Expansion 
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5 Go to the beginning of the time ruler, and click the Add Or Remove Keyframe 
At Current Time icon to add a keyframe for the mask expansion property. 


Watching_TV 


Source Name 


Vignette 
E Reflection 


D [Watching TV.mov_| 


Tips for creating masks 


If you have worked with Adobe Illustrator or Photoshop, or similar applications, 
you're probably familiar with masks and Bezier curves. If not, here are a few 
additional tips to help you create them effectively: 


e Use as few vertices as possible. 


e You can close a mask by clicking the starting vertex. To open a closed mask, click 
a mask segment, choose Layer > Mask And Shape Path, and deselect Closed. 


e To add points to an open path, press Ctrl (Windows) or Command (macOS), and 
click the last point on the path with the Pen tool. When the point is selected, you 
can continue adding points. 
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> Tip: Alternatively, 
you can change the 
duration of the movie 
to 11:17.To do so, 
choose Composition > 
Composition Settings, 
and then type 11.17 
in the Duration box. 


Trimming the work area 


The Turtle clip is shorter than the Watching _T’V clip. Currently, the girls are 
watching a blank screen at the end of the movie. You'll move the work area 
end point to the end of the Turtle.mov layer so only that portion of the movie 
will render. 


1 Go to 11:17, the last frame of the Turtle.mov layer. 

2 Press N to move the work area end point to the current time. 

3 Choose File > Save to save your work. 

In this lesson, you have worked with the mask tools to hide, reveal, and adjust 


portions of a composition to create a stylized inset shot. Next to keyframes, 
masks are probably the most-used feature of After Effects. 
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Review questions 


U F&F WwW N 


What is a mask? 

Name two ways to adjust the shape of a mask. 

What is a direction handle used for? 

What is the difference between an open mask and a closed mask? 


How is the Mask Feather tool useful? 


Review answers 


1 


A mask in After Effects is a path, or outline, that is used to modify layer effects and 
properties. The most common use of masks is to modify a layer’s alpha channel. 
A mask consists of segments and vertices. 


You can adjust the shape of a mask by dragging individual vertices or by dragging 
a segment. 


A direction handle is used to control the shape and angle of a Bezier curve. 


An open mask can be used to control effects or the placement of text; it does not 
define a region of transparency. A closed mask defines a region that will affect the 
alpha channel of a layer. 


The Mask Feather tool lets you vary the width of feathering at different points 
ona mask. With the Mask Feather tool, click to add a Feather point, and then 
drag it. 
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DISTORTING OBJECTS 
WITH THE PUPPET TOOLS 


Lesson overview 

In this lesson, you'll learn how to do the following: 

e Place Position pins using the Puppet Position Pin tool. 
e Deform an image using Advanced pins. 

e Define areas of overlap using the Overlap pins. 

e Manipulate rotation and scale using Bend pins. 

e Stiffen parts of an image using Starch pins. 

e Animate the position of puppet pins. 

e Record animation using the Puppet Sketch tool. 


e Animate facial expressions with Character Animator. 


This lesson will take about an hour to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 


com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 
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PROJECT: ANIMATED ILLUSTRATION 


BLUE CRAB 


Pull, squash, stretch, and otherwise deform objects 
on the screen using the Puppet tools. Whether you're 
creating realistic animations, fantastic scenarios, 

or modern art, the Puppet tools will expand your 
creative freedom. 


Getting started 


Using the Puppet tools in After Effects, you can add natural motion to raster images 
and vector graphics. Five tools create pins to define the points of deformation, areas 
of overlap, and areas that should remain more rigid. An additional tool, the Puppet 
Sketch tool, lets you record animation in real time. In this lesson, you'll use the 
Puppet tools to animate a crab’s pincers in an advertisement. 


Start by previewing the final movie and then setting up the project. 


1 Make sure the following files are in the Lessons/Lesson08 folder on your hard 
disk, or download them from www.adobepress.com now: 


e In the Assets folder: crab.psd, text.psd, Water background.mov 
e Inthe Sample_Movies folder: Lesson08.avi, Lesson08.mov 


2 Open and play the Lesson08.avi sample movie in Windows Movies & TV or 
the Lesson08.mov sample movie in QuickTime Player to see what you will 
create in this lesson. When you are done, close Windows Movies & TV or 
QuickTime Player. You may delete the sample movies from your hard disk if you 
have limited storage space. 


When you begin this lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS). When prompted, click OK to delete your 
preferences. Click New Project in the Home window. 


After Effects opens to display a blank, untitled project. 
4 Choose File > Save As > Save As. 


5 Inthe Save As dialog box, navigate to the Lessons/Lesson08/ 
Finished_Project folder. 


6 Name the project Lesson08_Finished.aep, and then click Save. 


Importing footage 
You'll import two Adobe Photoshop files and a background movie. 
1 Choose File > Import > File. 


2 Navigate to the Lessons/Lesson08/Assets folder. Press Ctrl or Command to select 
the crab.psd and Water background.mov files. Then click Import or Open. The 
assets appear in the Project panel. 


3 Double-click an empty area in the Project panel to open the Import File dialog 
box again. Select the text.psd file in the Lessons/Lesson08/Assets folder. 
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4 Choose Composition — Retain Layer Sizes from the Import As menu. (In macOS, 
you may need to click Options to see the Import As menu.) Then click Import 
or Open. 


5 Inthe Text.psd dialog box, select Editable Layer Styles, and click OK. The 
imported file is added as a composition to the Project panel; its layers are added 
in a separate folder. 


text v 
720 x 480 (0.91) 
A 0;00;29;29, 29.97 


textpsd xX 


Name a= ® Type Size F 
Pr crab.psd E Photoshop 877 KB sù 
sitet | Composition 

> HE text Layers Folder 
Q water background.mov W QuickTime 


` 


Creating the composition 
As with any project, you need to create a new composition. 


1 Click New Composition in the Composition panel. 


New Composition New Composition 
From Footage 


2 Name the composition Blue Crab. 


3 Choose NTSC DV from the Preset pop-up menu. The preset automatically 
sets the width, height, pixel aspect ratio, and frame rate for the composition. 
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4 Inthe Duration field, type 1000 to specify 10 seconds. 


5 Change the Background Color to a deep cyan color. (We used R=5, G=62, B=65.) 
Then click OK to close the Composition Settings dialog box. 


Composition Settings 


After Effects opens the new composition in the Timeline and Composition panels. 


Adding the background 


It’s easier to animate the image in context, so first you'll add the background 
to the composition. 


1 Press the Home key or move the current-time indicator to the beginning 
of the composition. 


2 Drag the Water background.mov file to the Timeline panel. 


3 Click the Lock icon (@) for the layer to prevent accidental changes to it for now. 


Source Name Per, 
D Water background.mov # 
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Animating imported text 


The final movie includes two lines of animated text. Because you imported the 
text.psd file as a composition with layers intact, you can work on it in its own 
Timeline panel, editing and animating its layers independently. You'll add an 
animation preset to each layer. 


1 Drag the text composition from the Project panel into the Timeline panel, 
placing it at the top of the layer stack. 


Blue Crab = 


Source Name 


a = 


D Water background.mov 


BLUE CRAB 


2 Double-click the text composition to open it in its own Timeline panel. 


3 Shift-click to select both layers in the text Timeline panel, and choose Layer > 
Create > Convert to Editable Text. 


| oe > =: Layer Name 
c l1 «charter services- 
[2 = 2 BLUE CRAB 
SZ 


Now the text layers can be edited, so you can apply animation presets. 
4 Go to 3:00. Then deselect both layers, and select only the BLUE CRAB layer. 


5 In the Effects and Presets panel, search for the Fly In With A Twist animation 
preset. Then drag it onto the BLUE CRAB layer. 


| Effects & Presets 


fly in with 
| v* Animation Presets 
n i v Text 
oge > =: Layer Name MEN EE Text 
R ` Animate In 
° >H 1 T -charter services» ~m = 


oO > 2 
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By default, the animation preset lasts just over two and a half seconds, so the text 
will begin to fly in at 3:00 and finish at 5:16. After Effects adds the keyframes for 
the effect. 


6 Go to 5:21, and select the charter services layer. 


7 Inthe Effects and Presets panel, search for the Slow Fade On animation preset. 
Then drag it onto the charter services layer. 


8 Return to the Blue Crab Timeline panel, and move the current-time indicator 
to the beginning of the time ruler. Press the spacebar to preview the animation. 
Press the spacebar again to stop playback. 


BLUE CRAB BLUE CRAB 


9 Choose File > Save to save your work so far. 


Scaling an object 


Next, you'll add the crab. You'll animate it so that it fills the screen at the begin- 
ning of the movie, and then quickly shrinks and moves into position above the area 
where the text will appear. 


1 Drag the crab.psd file from the Project panel to the top layer in the 
Timeline panel. 


2 Press the Home key to move the current-time indicator to the beginning 
of the time ruler. 


3 Select the crab.psd layer in the Timeline panel, and press S to display 
its Scale property. 


Blue Crab = 


Source Name 


EJ text 
D Water background.mov 


4 Change the Scale value to 400%. 


5 Click the stopwatch icon (ð) next to Scale to create an initial keyframe. 
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6 Move to 2:00, and change the Scale to 75%. 


Blue Crab 


Source Name 


lv Scale 


RE text 
Water background.mov 


The crab scales appropriately, but its position isn’t quite right. 
7 Press the Home key to return to the beginning of the time ruler. 


8 Press P to display the layer’s Position property, and change the Position 
to 360, 82. The crab moves up to fill the composition. 


9 Click the stopwatch icon next to Position to create an initial keyframe. 
10 Go to 1:15, and change the Position to 360, 228. 
11 Go to 2:00, and change the Position to 360,182. 


12 Drag the current-time indicator across the first two seconds of the time ruler 
to see the crab animation. 


-a 


13 Hide the properties for the crab.psd layer, and choose File > Save. 


About the Puppet tools 


The Puppet tools turn raster and vector images into virtual marionettes. When 

you move a string on a marionette, the body part attached to that string moves; 
pull the string attached to the hand, and the hand goes up. The Puppet tools use 
pins to indicate where strings would be attached. 


The Puppet effect deforms parts of an image based on the positions of pins that 

you place and animate. These pins determine which parts of the image should move 
or rotate, which parts should remain rigid, and which parts should be in front when 
areas overlap. 
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® Note: The mesh is 
calculated at the frame 
where the Deform pins 
are applied. If you add 
more pins anywhere 

in the timeline, they 
are placed based on 
the original position 
of the mesh. 


There are five kinds of pins, each placed by a different tool: 


e The Puppet Position Pin tool (#) places and moves Position pins, which change 
the position of specific points in an image. 


e The Puppet Starch Pin tool (A) places Starch pins, which stiffen parts of the 
image so that they are distorted less. 


e The Puppet Bend Pin tool (,) places Bend pins, which let you change the 
rotation or scale of part of an image without changing its position. 


e The Puppet Advanced Pin tool (A) places Advanced pins, which give you 
complete control over rotation, scale, and position. 


e The Puppet Overlap Pin tool (#2) places Overlap pins, which indicate the parts 
of an image that should be in the front when areas overlap. 


As soon as you place a pin, the area within an outline is automatically divided into 
a mesh of triangles. Each part of the mesh is associated with the pixels of the image, 
so as the mesh moves, so do the pixels. When you animate a Position pin, the mesh 
deforms more in the area closest to the pin, while keeping the overall shape as rigid 
as possible. For example, if you animate a pin in a character’s hand, the hand and 
arm will be deformed, but most of the character will remain in place. 


Adding Position pins 


Position pins are the basic component of the Puppet effect. Where you place these 
pins and how you position them determine how the objects move on the screen. 
You'll place Position pins and display the mesh that After Effects creates to deter- 
mine the area of influence for each pin. 


When you select the Puppet Position Pin tool, the Tools panel displays the Puppet 
tool options. Each pin has its own properties in the Timeline panel, and After 
Effects automatically creates an initial keyframe for each pin. 


1 Select the Puppet Position Pin tool (#) in the Tools panel. 


2 Go to 1:27, just before the crab scales down to its final size. 


3 Inthe Composition panel, place a Position pin in the middle of the crab’s 
left pincer. 
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A yellow dot representing the Position pin appears in the Composition panel. If at 
this point you were to use the Selection tool (>) to move the Position pin, the entire 
crab would move with it. You need more pins to keep the other parts of the mesh 
in place. 


4 Using the Puppet Position Pin tool, place another Position pin in the middle 


of the right pincer. 


Now you can move a pincer with the Selection tool. The more pins you place, 
the smaller the area of influence for each pin, and the less each area will stretch. 


5 Select the Selection tool (}), and drag one of the Position pins to see 
its effect. Then return it to its original position by pressing Ctrl+Z (Windows) 
or Command+Z (macOS). 


6 Select the Puppet Position Pin tool again, and then place additional Position 
pins at the top of each antenna, at the end of each side leg, and at the tip of 
each of the crab’s swimming legs. 


7 Inthe Timeline panel, expand the Mesh 1 > Deform properties. Each Position 
pin is listed. 
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Adding Advanced and Bend pins 


You can move Advanced pins in the same way that you move Position pins. But you can 
also use them to rotate and scale the area of the image. You'll replace the Position 
pins in the pincers with Advanced pins. Bend pins don't affect position, but they do 
let you rotate or scale an area while keeping it in place. You'll add Bend pins to the 
middle of the crab’s swimmer legs. Then, you'll display the mesh that After Effects 
creates to determine the area of influence for each pin. 


1 Select the Selection tool in the Tools panel. Then, select and delete each 
of the Position pins in the pincers. 


2 Select the Puppet Advanced Pin tool (A), hidden beneath the Puppet Position 
Pin tool in the Tools panel. 


3 Place an Advanced pin in the middle of the left pincer, and then place another 
one in the middle of the right pincer. 


Advanced pins appear as dots surrounded by rings. To scale an area, drag the box in 
the ring outward or inward. To rotate an area, drag the ring itself clockwise or counter- 
clockwise. You'll use the Advanced pins to animate the pincers. 


4 Select the Puppet Bend Pin tool (©), hidden beneath the Puppet Advanced Pin 
tool in the Tools panel. 


5 Place a Bend pin in the middle of the crab’s left swimmer leg, and then place 
another one in the middle of the right swimmer leg. 


Depending on the type of animation you're performing, you may want to name 
the pins. In this case, you'll name just the pincer and antenna pins. 
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6 Select Puppet Pin 13, press Enter or Return, and rename the pin Left Pincer. 
Press Enter or Return again to accept the new name. 


Blue Crab = 


0;00;01;27 
0005 


oped Layer Name 


v Puppet Pin 14 

Pin Type Advanced 
) 345.6,84.1 

@ lb Scale 100.0% 
@ & tion 0x+0.0° 

v Left Pincer 
Pin Type Advanced 
D by 130.4,73.1 


7 Hide the pins’ properties. Then, rename the corresponding pins Right Pincer, 
Left Antenna, and Right Antenna. (They’re probably Puppet Pins 14, 3, and 
4, respectively.) The default pin names are numbered in the order they were 
created. You do not need to name the pins on the legs unless you want to. 


Blue Crab = 
0;00;01;27 


Layer Name 4 o@med > = Layer Name 
7 Mesh v Mesh1 
Density Density 
Expansion . Expansion 
¢ Deform v Deform 
> Puppet Pin 16 > Puppet Pin 16 


Puppet Pin 12 Puppet Pin 12 
Puppet Pin 11 Puppet Pin 11 
Puppet Pin 10 Puppet Pin 10 
Puppet Pin 9 > Puppet Pin 9 


Puppet Pin 8 Puppet Pin 8 


Puppet Pin 7 Puppet Pin 7 
Puppet Pin 6 Puppet Pin 6 
Puppet Pin 5 Puppet Pin 5 


Puppet Pin 4 
Puppet Pin 3 


8 Select Show in the options section of the Tools panel to display the 
distortion mesh. 


The crab is nearly the same color as the triangles in the mesh, so you'll need 
to change the mesh color. The mesh takes its color from the layer’s color label. 
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) Tip: You can extend 
the mesh beyond the 
outline of the layer 

in order to ensure a 
stroke is included in the 
deformation. To expand 
the mesh, increase the 
Expansion property in 
the options section of 
the Tools panel. 


9 Inthe Timeline panel, click the color label next to the Crab.psd layer, and then 
choose a contrasting color, such as red or purple. 


10 Select Mesh 1 in the Crab.psd layer to display the mesh again. 
11 Change the Density value in the options section of the Tools panel to 12. 


The Density setting determines how many triangles are included in the mesh. 
Increasing the number of triangles results in a smoother animation, but also 
increases rendering time. 


Mesh (J Show Expansion 


12 Choose File > Save to save your work so far. 


Defining areas of overlap = 


If your animation requires part of the object or character to pass in front of 
another, use the Puppet Overlap Pin tool to define the areas that should appear 
in front when areas overlap. Select the Puppet Overlap Pin tool, which is hidden 
behind the Puppet Position Pin tool in the Tools panel, click Show to display the 
mesh, and then click intersections in the mesh to place Overlap pins in the areas 
that should always remain in front. 


Puppet Position Pin Tool 
Puppet Starch Pin Tool 


Puppet Bend Pin Tool 


Puppet Advanced Pin Tool 


You can adjust the effect of the Overlap pins in the options area of the Tools panel. 
The In Front value determines the apparent proximity to the viewer; setting the 
value to 100% prevents those parts of the body that are overlapped from showing 
through. The Extent value determines how far the overlap influence extends for the 
pin; the affected area appears lighter in the Composition panel. 
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Stiffening an area 


The pincers, legs, and antennae of the crab will move in the animation, but the 
carapace should stay firm. You'll use the Puppet Starch Pin tool to add Starch pins 
to ensure the carapace isn’t affected by the pins’ movements. 


1 Select the Puppet Starch Pin tool (#), which is hidden behind the Puppet Bend 
Pin tool in the Tools panel. 


2 Ifthe mesh isn’t showing, select Show in the options area of the Tools panel 
to display it. 

3 Place Starch pins at the base of each pincer, leg, and antenna to stiffen the entire 
carapace, as in the image below. 


4 Hide the properties for the crab.psd layer in the Timeline panel. 


5 Choose File > Save to save your work so far. 


Squash and stretch 


Squash and stretch is a traditional animation technique that adds realism and 
weight to objects. It’s an exaggeration of the effect that occurs in real life when 

a moving object comes into contact with a stationary object, such as the ground. 
When squashing and stretching are applied correctly, the volume of the character 
doesn’t change. If you use the Puppet tools to animate cartoon characters or similar 
objects, consider how they interact with other objects. 


The easiest way to understand the principle of squash and stretch is to view an 
animation of a bouncing ball. As the ball lands, it partially flattens, or squashes. 
As it bounces up, it stretches. 
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Animating pin positions 


The pins are in place. Now you can change them to animate the crab. The Starch 
pins keep specific areas (in this case, the carapace) from moving too much. 


When you placed the pins, After Effects created initial keyframes for each pin at 
1:27. You'll animate the pins so that the crab waves its pincers, legs, and antennae, 
and then returns to its original position. 


1 Select the crab.psd layer in the Timeline panel, press U to display all the keyframes 
for the layer, and select the Puppet effect to make the puppet pins visible. 


2 Select the Selection tool in the Tools panel. Then go to 4:00, and select the 
Advanced pin on the left pincer. Drag the ring around it to the left to rotate 
the pincer outward, and then drag the center pin so that the pincer is almost 
vertical. Repeat the steps (but dragging the ring to the right) for the right pincer. 


3 Go to 5:00, and move the Left Pincer and Right Pincer pins so that the pincers 


are further apart. Then drag the small rectangle on each ring outward to bloat 


the pincers slightly. 


X 


BLUE CR 


BLUE CR BLUE CR 


4 At6:19, turn the pincers back inward. Then, at 8:19, position them so that 
they’re roughly vertical again. At 9:29, reduce the pincers’ scale back to their 
original size, and move the pincers so that they’re fully turned inward. 


5 Move the current-time indicator across the time ruler to see the pincers wave. 


Next, you'll move the antennae closer together. The first keyframe already exists, 
so you need to create only one more. 
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6 Go to 7:14, and pull the pins on the antennae closer to each other. 


Now you can animate all the legs. You want them to start moving even before 

the pincers do, and they should wave around a bit. 

7 Go to 1:19, and move the pin on each leg so that each leg is slightly longer and 
curved outward. Use the Bend pin on each of the swimmer legs to scale each leg 
slightly larger. 


8 Make changes to each leg at 2:01, 4:00, 6:17, and 8:10 so that the legs move slightly 
upward or downward, in and out as the video progresses. Move each pin about 
the same amount each time, in whatever direction you choose. At 8:10, use the 
Bend pins to return the swimmer legs to their original size. 


9 Press F2 or click an empty area of the Timeline panel to deselect all layers. Then, 
press the Home key or move the current-time indicator to the beginning of the 
time ruler. 


10 Press the spacebar to preview your animation. Press the spacebar again to stop 
playback. If you want to change the animation, adjust pins at each keyframe. 


fo ak 
BLUE CR 4 BLUE CRAB BLUE CRAB 


11 Choose File > Save to save your animation, and then hide all properties for the 
crab.psd layer. 


Using the Puppet tools to animate video 


You've used the Puppet tools to animate an image on a layer, but you can also use 
them to warp or create other special effects on video layers. You'll use Advanced 
pins to make the water swirl. 


1 Inthe Timeline panel, click the Lock icon to unlock the Water background.mov 
layer so you can edit it. 


2 Go to 4:00, where you can see the water clearly. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 


213 


> Tip: By default, 
the motion is played 
back at the speed at 
which it was recorded. 
To change the ratio 

of recording speed to 
playback speed, click 
Record Options in 

the Tools panel, and 
change the Speed value 
before recording. 


3 Select the Water background.mov layer. 


4 Select the Puppet Advanced Pin tool in the Tools panel, and then create two 
Advanced pins in the water on either side of the crab and one each above and 
below it. 


5 Deselect Show in the Tools panel so you can see the water clearly. 


6 Rotate each pin to create waves in the water. You'll probably need to scale and 
reposition the pins as well to ensure that the water reaches the edges of the 


scene. If you aren't happy with the effect, you can delete the pins and start over. 


7 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. Then press the spacebar to preview the animation. Press the 
spacebar again to stop playback. 


8 Hide all properties in the Timeline panel, and then save the project. 


Recording animation 


Changing the position of each pin at each keyframe worked, but you probably found 
the process to be slow and tedious. Instead of manually animating keyframes, you 
can use the Puppet Sketch tool to drag the pins into position in real time. After 
Effects starts recording the motion as soon as you begin dragging a pin, and it stops 
recording when you release the mouse button. The composition moves forward 
through time as you move the pin. When you stop recording, the current-time indi- 
cator returns to the point at which you began recording, so that you can record the 
path for another pin during the same time period. 


Experiment with this method of animation as you re-create the pincers’ movement 
using the Puppet Sketch tool. 


1 Choose File > Save As > Save As, and name the project Motionsketch.aep. 
Save it in the Lesson08/Finished_Project folder. 


2 Move the current-time indicator to 1:27. 


3 Inthe Timeline panel, select the crab.psd layer, and press U to display all the 
keyframes for the layer. 


Scroll down to the Left Pincer and Right Pincer pins. Drag to select all key- 
frames for those pins after 2:08, and then delete the keyframes. 
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Right ancer 


ton 
Sale 
tion 


Left Pincer 


The animation for the other pins remains, but you’ve removed the keyframes that 
animate the pincers. Depending on where you placed Starch pins, the pincers may 
move slightly in response to other pins’ movements. 


5 Select the Puppet Position Pin tool (#) in the Tools panel. 


6 Inthe Timeline panel, select Puppet to see the pins in the Composition panel, 
if they’re not already visible. 


7 Select the Left Pincer pin in the Composition panel, and press Ctrl (Windows) or 
Command (macOS) to activate the Puppet Sketch tool. (A clock icon appears 
next to the pointer.) 


8 Continue to hold down Ctrl or Command as you drag the Left Pincer pin into 
different positions for the length of the video. Release the mouse button when 
you've finished. The current-time indicator returns to 1:27. 


9 Press Ctrl or Command, and drag the Right Pincer pin into different positions. 
Use the outline of the crab and the other pincer’s movements to guide you. 
Release the mouse button to stop recording. 


® 


® 


Le) 


10 Preview the final animation. 


You've used the Puppet tools to create a realistic, engaging animation. Remember 
that you can use the Puppet tools to deform and manipulate many kinds of objects. 
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Extra credit 


Act it out with Adobe Character Animator 


If you identify strongly with your characters, you might want to use Adobe Character Animator 
instead of creating cumbersome keyframes. It’s especially useful if you're creating a long scene 
or you need to match the character’s mouth to speech. It’s also a lot of fun. 


Character Animator is included in an Adobe Creative Cloud membership. With it, you can import a 
character you've created in Photoshop or Illustrator, and then act out facial gestures and head move- 
ments in front of your webcam; your character mirrors your gestures on the screen. If you speak, the 


character’s mouth moves to match your words. 


You can move other body parts, such as legs and arms, using keyboard shortcuts or your mouse or 
tablet. And you can set up dangling behavior so that, for example, if a rabbit's head moves to the left, 


its ears dangle with it. 


Character Animator includes some entertaining interactive tutorials to help you get started. To learn 
more, go to https://www.adobe.com/products/character-animator.html. 


Tips for a smooth animation experience 


e Create different layers for different moving 
parts: draw the mouth on one layer, the right 
eye on another, and so on. 


e Name layers so Character Animator will 
recognize them. Certain words, such as 
“pupil,” help map the character to the image 
in the camera. 


e Practice facial and other gestures before 
recording. Once you've set your Rest Pose, try 
different mouth shapes, eyebrow raises, head 
waggles, and other movements to see how 
subtle or exaggerated movements translate 
for your character. 
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Speak into the microphone as you record. 
Many mouth shapes are triggered by audio 
cues, such as “uh-oh,’ and the character’s 
mouth movements will be synced to your 
words automatically. 


Especially at first, consider using an existing 
character file as a template. It'll be easier to 
get the layer names right. 


Try animating objects that don’t have 
faces and bodies. For example, you can 
use Character Animator to animate clouds 
floating, a flag waving, or flowers opening. 
Be creative and have fun! 


Review questions 

1 What’s the difference between the Puppet Position Pin tool and the Puppet Advanced 
Pin tool? 

2 When would you use the Puppet Starch Pin tool? 


3 Describe two methods of animating pin positions. 


Review answers 


1 The Puppet Position Pin tool creates Position pins, which define the position of a por- 
tion of the image as the image is deformed. The Puppet Advanced Pin tool creates 
Advanced pins, which define the scale and rotation, as well as the position, of a portion 
of the image. 


2 Use the Puppet Starch Pin tool to add Starch pins to an area that you want to remain 
more rigid while other areas of the object are distorted. 


3 You can manually animate pin positions by changing the position for each pin in the 
Timeline panel. To animate pin positions more quickly, use the Puppet Sketch tool: 
With the Puppet Position Pin tool selected, press Ctrl or Command, and drag a pin 
wto record its movement. 
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9 USING THE ROTO BRUSH TOOL 


Lesson overview 
In this lesson, you'll learn how to do the following: 


e Extract a foreground object from the background using the 
Roto Brush tool. 


e Correct the segmentation boundary across a span of frames. 
e Touch up a matte with the Refine Edge tool. 

e Freeze a matte across a clip. 

e Animate properties for creative effects. 


e Track a face in footage. 


This lesson will take about an hour to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 


com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 
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PROJECT: TV COMMERCIAL 


With the Roto Brush tool, you can quickly separate 

a foreground object from a background across many 
frames. You can achieve professional results in a frac- 
tion of the time you'd spend performing the same 
task with traditional rotoscoping. 


About rotoscoping 


When you draw or paint on the frames of a movie, you're rotoscoping. For example, 
a common use of rotoscoping is to trace an object, using the path as a mask to 
separate it from the background so you can work with it separately. Traditionally in 
After Effects, you drew masks, animated the mask paths, and then used the masks 
to define a matte. (A matte is a mask used to hide part of an image so that another 
image can be superimposed.) While effective, this is a time-intensive, tedious 
process, especially if the object moves a great deal or the background is complex. 


If a background or foreground object is a consistent, distinct color, you could use 
color keying to separate the object from the background. If the subject was shot 
against a green or blue background (green screen or blue screen), keying is usually 
much easier than rotoscoping. However, keying is less efficient when you're work- 
ing with complex backgrounds. 


The Roto Brush tool in After Effects is much faster than conventional rotoscoping. 
You use the Roto Brush tool to define the foreground and background elements. 
Then After Effects creates a matte, and tracks the movement of the matte over time. 
The Roto Brush tool does much of the work for you, leaving only a little cleanup 
work to be done. 


Getting started 


In this lesson, you'll use the Roto Brush tool to isolate a young boy from a wet winter 
background so you can color-treat the background without affecting the boy. To 
finish up the project, you'll add an animated title. 


First, you'll preview the final movie and set up your project. 


1 Make sure the following files are in the Lessons/Lesson09 folder on your hard 
disk, or download them from www.adobepress.com now: 


e In the Assets folder: boy.mov, Facetracking.mov 


e Inthe Sample_Movies folder: Lesson09.avi, Lesson09.mov 
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2 Open and play the Lesson09.avi sample movie in Windows Movies & TV 
or the Lesson09.mov sample movie in QuickTime Player to see what you will 
create in this lesson. When you are done, close Windows Movies & TV or 
QuickTime Player. You may delete the sample movies from your hard disk 
if you have limited storage space. 


When you begin this lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+Alt+Shift (Windows) 
or Command+Option+Shift (macOS). When prompted, click OK to delete 
your preferences. 


4 Click New Project in the Home window. 
After Effects opens to display an empty, untitled project. 
5 Choose File > Save As > Save As. 


6 Inthe Save As dialog box, navigate to the Lessons/Lesson09/ 
Finished_Project folder. 


7 Name the project Lesson09_Finished.aep, and then click Save. 


Creating the composition 
You'll import a footage file and create a composition from it. 


1 Click New Composition From 
Footage in the Composition panel. 


2 Navigate to the Lessons/Lesson09/ 
Assets folder, select the boy.mov file, 
and then click Import or Open. 


After Effects creates a composition 
named boy, based on the settings in the 
boy.mov file. The composition is three 


seconds long, with a frame size of 1920 
x 1080. The movie file was shot at a 
rate of 29.97 frames per second. 


3 Choose File > Save to save the 
project so far. 
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Creating a segmentation boundary 


You use the Roto Brush tool to specify which parts of the clip are in the foreground 
and which are in the background. You add strokes to distinguish the two, and then 
After Effects creates a segmentation boundary between the foreground and background. 


Creating a base frame 


To use the Roto Brush tool to isolate a foreground object, you start by adding strokes 
to a base frame to identify foreground and background areas. You can start on any 
frame in the clip, but in this exercise, you'll use the first frame as the base frame. 
Then you'll add the strokes that identify the boy as the foreground object. 


1 Move the current-time indicator across the time ruler to preview the footage. 


2 Press the Home key to move the current-time indicator to the beginning 
of the time ruler. 


3 Select the Roto Brush tool ($°) in the Tools panel. 
You use the Roto Brush tool in the Layer panel, which you'll open now. 


4 Double-click the boy.mov layer in the Timeline panel to open the clip in the 
Layer panel. 


5 Choose Fit from the Magnification Ratio pop-up menu at the bottom of the Layer 


panel if you don’t see the entire image. 


By default, the Roto Brush tool creates green foreground strokes. You'll start by adding 
strokes to the foreground—the boy. Generally, it’s most efficient to start with broad 
strokes and then use smaller brushes to refine the border. 
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6 Choose Window > Brushes to open the Brushes panel. Set up a hard round 
100- pixel brush. (You may need to resize the Brushes panel to see the options.) 


When you're drawing strokes to define the foreground object, follow the skeletal 
structure of the subject. Unlike traditional rotoscoping, you don’t need to define a 
precise boundary around the object. Start with broad strokes, and work down to small 
regions as After Effects determines where the boundary is supposed to be. 


7 Draw a green stroke from the boy’s head down toward the bottom of the clip. B Tip: You can quickly 
zoom in and out of 

the Layer panel using 
the scroll wheel on 
your mouse. 


A magenta outline identifies the boundaries After Effects created for the foreground 
object. After Effects recognized only about half of the boy, because you initially 
sampled only a small area of the subject. You'll help After Effects find the boundary 
by adding some more foreground strokes. 


8 Still using a large brush, draw a green stroke from left to right across the boy’s 
coat, including the black strip on the right. 


9 Useasmaller brush to add any neglected areas to the foreground. > Tip: To increase 

or decrease the brush 
size quickly, press Ctrl 
(Windows) or Command 
(macOS) as you drag. 
Drag right to increase 
the brush size, or left 

to decrease it. 


It can be tricky to get some areas without accidentally adding background as well. 
It’s okay if you haven't captured every detail in the foreground. You'll use back- 
ground strokes to remove any extraneous areas of the matte. 
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10 Press Alt (Windows) or Option (macOS) to switch to the red background 
stroke brush. 


11 Add red strokes to background areas you want to exclude from the matte. Switch 
back and forth between the foreground and background brushes to fine-tune the 
matte. Don’t forget to deselect the area under the boy’s hat where the back- 
ground shows through. In fact, one click may be all it takes to exclude that area 


from the matte. 


Editing Adobe Premiere Pro 
clips with After Effects 


You can work with a clip in both Adobe Premiere Pro and After Effects, moving 
easily between the two applications as you edit your project. 


To edit an Adobe Premiere Pro clip in After Effects, do the following: 


1 Right-click or Control-click the clip in Adobe Premiere Pro, and choose Replace 
With After Effects Composition. 


After Effects starts, and opens the Adobe Premiere Pro clip. 


2 Save the project when you're prompted by After Effects. Then, work in the 
composition just as you'd work in any other After Effects project. 


3 When your're finished, save the project, and return to Adobe Premiere Pro. 


Your changes are automatically reflected in the timeline. 
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Don't worry about being exact about your brush strokes. Just make sure the matte 

is within 1 to 2 pixels of the edge of the foreground object. You'll have an opportunity 
to refine the matte later. However, After Effects uses the information on the base 
frame to adjust the matte for the rest of the span, so you want the matte to be accurate. 


12 Click the Toggle Alpha button (Hl) 
at the bottom of the Layer panel. 
The selected area is white against a 
black background, so you can see the 
matte clearly. 


13 Click the Toggle Alpha Overlay button 
(MB) at the bottom of the Layer panel. 
The foreground area appears in color, 
and the background has a red overlay. 


14 Click the Toggle Alpha Boundary button 
(El) at the bottom of the Layer panel to 
see the outline around the boy again. 


As you use the Roto Brush tool, the Alpha Boundary is the best way to see how 
accurate your boundary is, because you can see everything in the frame. However, 
the Alpha and Alpha Overlay options let you see your matte without the distraction 
of the background. 


Refining the boundary across the initial span 


You used the Roto Brush tool to create a base frame, which includes a segmentation 
boundary that divides the foreground from the background. After Effects applied 
the segmentation boundary across a span of frames. The Roto Brush span appears 
below the time ruler at the bottom of the Layer panel. As you move forward and 
backward through the footage, the segmentation boundary moves with the fore- 
ground object (in this case, the boy). 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 


225 


» Tip: To move 
forward one frame, 
press the 2 key on your 
keyboard; to move back 
one frame, press the 

1 key. 


® Note: As it propa- 
gates the segmentation 
boundary for a frame, 
After Effects caches that 
frame. Cached frames 
have a green bar in the 
time ruler. If you jump 
ahead to a frame 
further along the span, 
After Effects may take 
longer to calculate 

the boundary. 


1 Extend the span range by dragging the end of the span to 1:00 in the Layer panel. 


You'll step through the frames in the span and make adjustments to the segmentation 
boundary as necessary. 


2 Press the 2 key on your main keyboard (not the numeric keypad) to move forward 
one frame. 


Working from the base frame, After Effects tracks the edge of the object and attempts to 
follow its movement. Depending on how complex your foreground and background 
elements are, the boundary may or may not conform exactly to the area you hoped it 
would. As you progress through this clip, you may notice changes to the segmenta- 
tion boundary along the boy’s right sleeve (the left edge of the clip) as more of the coat 
is revealed in the frame. Likewise, you may need to refine the segmentation bound- 
ary around the flaps of the cap and the edges of the hood. 


3 Using the Roto Brush tool, paint foreground and background strokes to refine the 
matte for this frame. If the matte is accurate, you don’t need to paint any strokes. 


If you make a stroke you don’t like, you can always undo the stroke and try again. 
As you move through the span, each change you make affects the frames after it. 
The more you refine your selection, the better the overall results will be. You may 
find it useful to move forward a few frames to see how changes affect the boundary. 


4 Press the 2 key again to move forward to the next frame. 


5 Use the Roto Brush tool to add to the foreground or subtract from the 
background as necessary to refine the boundary. 


6 Repeat steps 4 and 5 until you reach 1:00. 
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Adding new base frames 


After Effects creates an initial Roto Brush span of 40 frames (20 in each direction). 
As you move through the frames, the span range may increase automatically, or you 
can drag to extend the span. However, the further you move from the base frame, 
the longer After Effects takes to propagate, or calculate, the segmentation for each 
frame, especially if the shot is complex. If the scene changes significantly, it may be 
better to create multiple base frames for your footage than to have one really long 
span. The scene in this project remains fairly consistent, so you could extend the 
span and make additional adjustments as needed. However, you'll create additional 
base frames to gain experience using the tools, learn to connect spans, and see how 
the segmentation shifts as you move further from a base frame. 


You’ve reached 1:00 in the refining process. Now you'll add a new base frame 
to the project. 


1 Go to 1:20 in the Layer panel. This frame isn’t included in the initial span, 
so the segmentation boundary includes the entire frame. 


2 Use the Roto Brush tool to add foreground and background strokes, defining 
the segmentation boundary. 


A new base frame (represented by a blue rectangle) is added to the time ruler, 
and the Roto Brush span extends several frames behind and ahead of the new 
base frame. Depending on how far the initial span propagated, there may be a gap 
between the two spans. If so, you'll connect the two. 
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3 Ifnecessary, drag the left edge of the new span to the edge of the previous span. 


4 Press 1 to move backward one frame (from the new base frame), and then refine 
the segmentation boundary. 


5 Continue to move backward through the span, refining the segmentation 
boundary until you reach the frame at 1:00. 


6 Move back to the base frame at 1:20, and then press 2 to move forward, 
correcting the segmentation boundary for each frame if necessary. 


7 When you reach the end of the span, drag the right edge to the end of the clip, 
and continue to refine each frame in the footage as needed. Pay special attention 
to the left earflap of the cap when it crosses in front of the tree. The dark areas 
overlap, making it more difficult to get a consistent edge. Remember that you are 
trying to get the segmentation boundary as close to the edge of the foreground 
object as possible. 


8 When you have completed refining the segmentation boundary for the entire 


clip, choose File > Save to save your work so far. 


Fine-tuning the matte 


Roto Brush does a pretty good job, but there may be stray bits of background in the 
matte, or foreground areas that weren't included. You'll clean those up by refining 
the edge. 


Adjusting the Roto Brush & Refine Edge effect 


When you use the Roto Brush tool, After Effects applies the Roto Brush & Refine 
Edge effect to the layer. You can modify the effect using settings in the Effect 
Controls panel. You'll use those settings to further refine the edge of the matte. 


1 Press the spacebar to play the clip in the Layer panel; press the spacebar again 
to end the preview when you've seen the whole clip. 


As you preview the clip, you may notice that the segmentation boundary area jumps 
around quite a bit. You'll use the Reduce Chatter setting to make it smoother. 
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2 Inthe Effect Controls panel, increase the Feather amount to 10, and increase 
Reduce Chatter to 20%. 


E ó: 


The Reduce Chatter value determines how much influence the current frame has 
when performing a weighted average across adjacent frames. Depending on how 
tight your matte was, you may need to increase Reduce Chatter to 50%. 


3 Preview the clip again. Notice how much smoother the edge of the matte 
has become. 


Refine Soft Matte and 
Refine Hard Matte effects 


After Effects includes two related effects for refining mattes: Refine Soft Matte and 
Refine Hard Matte. The Refine Soft Matte effect does the same thing as Refine Edge 
Matte, except it applies the effect to the entire matte at a constant width. If you 
need to capture subtle variations across an entire matte, use this effect. 


The Refine Hard Matte effect performs the same edge refinements as the Roto Brush 
when Fine-Tune Roto Brush Matte is turned on in the Roto Brush & Refine Edge 
effect in the Effect Controls panel. 


Using the Refine Edge tool 


The boy’s coat and face have hard edges, but his cap is fuzzy, and the Roto Brush 
tool didn’t pick up the nuanced edge. The Refine Edge tool lets you include fine 
details such as wisps of hair in designated areas of the segmentation boundary. 


Though it might be tempting to use the Refine Edge tool immediately after creat- 
ing the base frame, it’s best to wait until you've refined the segmentation boundary 
across the entire clip. Because of the way After Effects propagates the segmentation 
boundary, using the Refine Edge tool too early results in a matte that is difficult to use. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 229 


@ Note: Use the 
Refine Edge tool only 
after you have cleaned 
up the matte across the 
entire clip. 


1 Go to the first base frame, and then zoom in so that you can see the edges of the 
cap clearly. Enlarge the Layer panel if necessary, and use the Hand tool to move 
the layer so you can see the entire cap. 


2 Select the Refine Edge tool (&), hidden beneath the Roto Brush tool in the 
Tools panel. 


The cap is relatively soft, so a small brush size will work well. For a fuzzier object, 
you might have better results with a much larger brush. The brush needs to overlap 
the stray edges that emerge from the object. 


3 Change the brush size to 10 pixels. 


When you use the Refine Edge tool, draw strokes across or along the edges 
of the matte. 


4 Inthe Layer panel, move the Refine Edge tool over 
the edge of the cap, straddling the segmentation 
boundary and including the fuzzy variations. 
You can use multiple strokes to move the tool 
around the entire cap. 


When you release the mouse, After Effects 


switches to the Refine Edge X-ray view so that 
you can see how the Refine Edge tool changes the 
matte, capturing the detail in the edges. 


5 Move to the second base frame in the Layer panel (1:20), and then repeat steps 
3—4 to complete the rotoscoping process. 


6 Zoom out to see the entire scene, resize the Layer panel if you enlarged it, and then 
choose File > Save to save your work. 


Freezing your Roto Brush tool results 


You've put a fair amount of time and effort into creating the segmentation boundary 
across the entire clip. After Effects has cached the segmentation boundary so it can 
recall it without having to make the calculations again. To keep that data easily 
accessible, you'll freeze it. This reduces the processing demands on your system 
so you can work faster in After Effects. 
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Once the segmentation is frozen, you cannot edit it unless you unfreeze it. Refreezing 
the segmentation is time-consuming, so it’s best to refine the segmentation boundary 
as much as possible before freezing. 


1 Click the Freeze button in the lower 
Depending 

on your system, 
this may take 

a while. 


right area of the Layer panel. 


After Effects displays a progress bar as it freezes the Roto Brush and Refine Edge tool 
data. Freezing may take a few minutes, depending on your system. As After Effects 
freezes the information for each frame, the cache line turns blue. When it has finished 
freezing, a blue warning bar appears above the time ruler in the Layer panel, remind- 
ing you that the segmentation is frozen. 


2 Click the Toggle Alpha Boundary button (Ml) in the Layer panel to see the matte. 
Then click the Toggle Transparency Grid button (Œ). Move the time marker across 


the time ruler to see the subject without the distractions of the background. 


3 Click the Toggle Alpha Boundary button again to see the boundary. 
4 Choose File > Save. 


After Effects saves the frozen segmentation information with the project. 


Changing the background 


There are many reasons to isolate a foreground image from a background. Often, 
you want to replace the background entirely, moving the subject to a different 
setting. But rotoscoping is also useful if you simply want to change the foreground 
or background without modifying the other. In this lesson, you'll make the back- 
ground blue to enhance the theme of winter and help the subject stand out. 
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1 Close the Layer panel to return to the Composition panel, and then move 
the current-time indicator to the beginning of the timeline. Choose Fit from 


the Magnification Ratio pop-up menu at the bottom of the Composition panel. 


The Composition panel displays the composition, which includes only the boy.mov 
layer, consisting only of the foreground you isolated from the clip. 


2 Hide the properties for the boy.mov layer, if they’re visible. 


3 Click the Project tab to display the Project panel. Then drag another copy of the 
boy.mov clip from the Project panel to the Timeline panel, and place it below 
the original boy.mov layer. 


4 Click the new layer, press Enter or Return, and rename the layer Background. 
Then press Enter or Return again. 


5 With the Background layer selected, choose Effect > Color Correction > 
Hue/Saturation in the After Effects menu bar. 


6 Inthe Effect Controls panel, do the following: 
e Select Colorize. 


e Change Colorize Hue to -122 degrees. 
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e Change Colorize Saturation to 29. 


e Change Colorize Lightness to -13. 


fx BA Hue/Saturation 


Range 


7 Choose File > Increment And Save. 


If you save incrementally, you can return to earlier versions of your project to make 
adjustments later. This can be very useful if you’re experimenting or want to try 
alternative effects. The Increment And Save feature preserves the previously saved 
version of the project and creates a new project with the same name, with an 
increasing number added to the filename. 


Adding animated text 
You're nearly done. All you need to do is to add the animated title between the boy 
and the background. 


1 Deselect all layers, and then move the current-time indicator to the beginning 
of the time ruler. 


2 Choose Layer > New > Text. 
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© Note: If you don't 
have Myriad Semibold 
on your computer, 
use Adobe Fonts to 
install it. See Lesson 3 
to learn how to use 
Adobe Fonts. 


A new text layer appears in the Timeline panel at the top of the layer stack, 


and a cursor appears in the Composition panel. 


3 Type WINTER BLUES in the Composition panel. 


4 Select all the text in the Composition panel, and then do the following 


in the Character panel: 


Choose Myriad Pro for the font. 

Choose Semibold for the font style. 
Type 300 px for the font size. 

Choose Optical from the Kerning menu. 
Select white for the fill color. 

Select black for the stroke color. 


Make sure the stroke width is 1 px and Stroke Over Fill is selected. 


5 Select the text layer in the Timeline panel to deselect the text. Then press 
T to reveal the layer’s Opacity property. Change the Opacity to 40%. 


P 
D Opacity 

B [boy.mov} 

B Background 


6 Click the Effects & Presets tab to open the panel, and then type Glow in the search 


box. Double-click the Glow preset under Stylize. 


The text gains some texture. The default settings are fine. 


7 Drag the WINTER BLUES layer in the Timeline panel down to position it 
between the boy.mov and Background layers. Then move the current-time 


indicator to the beginning of the time ruler, if it’s not already there. 
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You'll animate the text so that it moves left behind the boy while he crosses to the right 
of the frame. 


8 With the WINTER BLUES layer selected, press P to reveal its Position property. 
Change the Position to 1925, 540. Click the stopwatch icon (6) for the Position 
property to set a keyframe. 


B [boy.mov] + 

, R 
Position 

B Background R 


The text moves offscreen, so it’s not visible when the movie begins. 


9 Move the current-time indicator to 3:01 (the end of the clip), and change 
the Position to -1990, 540. 


B [boy.mov] P 

l # 
Position 

B Background 


The text moves to the left. After Effects creates a keyframe. 


10 Deselect all layers in the Timeline panel, and move the current-time indicator 
to the beginning of the time ruler. Press the spacebar to preview the clip. 


11 Choose File > Save to save your work. 
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Outputting your project 


You'll render your movie to complete the project. 


1 
2 
3 


6 
7 


Choose File > Export > Add To Render Queue. 
In the Render Queue panel, click the blue words Best Settings. 


In the Render Settings dialog box, choose Half from the Resolution pop-up menu, 
and make sure Use Comp’s Frame Rate is selected in the Frame Rate area. Then 
click OK. 


Click the blue text next to Output Module. Then, at the bottom of the Output 
Module Settings dialog box, choose Audio Output Off, and click OK. 


Click the blue text next to Output To. In the Output Movie To dialog box, 
navigate to the Lesson09/Finished_Project folder, and click Save. 


Click Render in the top right corner of the Render Queue panel. 


When the project has rendered, save and close it. 


Congratulations! You’ve separated a foreground object from the background, 


including tricky details, modified the background, and animated some text to 


complete the movie. You're ready to use the Roto Brush tool on your own projects. 
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Extra credit 


Tracking faces 
The face-tracking feature in After Effects makes it easier to track a face or specific facial features, such 
as lips or eyes. Previously, tracking a face required roto brushing or complex keying. 


© Note: If you open the Lesson09_extra_credit.aep file, you may need to relink the Facetracking.mov asset. 


1 Choose File > New > New Project. 


2 Click the New Composition From Footage button in the Composition panel, and then navigate 
to the Lessons/Lesson09/Assets folder. Select the Facetracking.mov file, and click Import or Open. 


3 Select the Facetracking.mov layer in the Timeline panel. Then, select the Ellipse tool, hidden by the 
Rectangle tool in the Tools panel. 


4 Drag an elliptical mask roughly covering the face. 


oO Fy 


5 Right-click the Mask 1 layer, and choose Track Mask. 


6 Inthe Tracker panel, choose Face Tracking (Outline Only) from the Method menu. 


Facetracking = 


oHe $ s Source Name 
z SMi Oend] 
~ Masks 
> E Maski 


Track Mask 


Position, Scale, Ro 
Perspective 
Face Tracking (Outline Only) N 


Face Trac atures) 


The Face Tracking (Outline Only) option tracks the entire face. The Face Tracking (Detailed Features) 
option tracks the outline plus the lips, eyes, and other distinctive facial features. You can export 
detailed facial data for use in Character Animator, or you can use it in After Effects to apply effects 
or to match it with another layer, such as an eye patch or a hat. 


(continued on next page) 
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Ext ra cred it (continued) 


7 Click the Track Forward button in the Tracker panel. 


The Tracker tracks the face, changing the mask’s shape and position as the face moves. 


8 Press the Home key to return to the beginning of the timeline, and then move the current-time 
indicator across the time ruler to see how the mask moves with the face. 


9 Inthe Effects & Presets panel, search for Bright. Then drag the Brightness & Contrast effect onto 
the Facetracking.mov layer in the Timeline panel. 


10 Expand Effects > Brightness & Contrast > Compositing Options in the Timeline panel. 


11 Click the + icon next to Compositing Options. Choose Mask 1 from the Mask Reference 1 menu, 
and increase Brightness to 50. 


The masked area of the face brightens, but nothing else does. This setting is too bright, and the edge 
of the mask is too abrupt. You'll make it more subtle. 


12 Reduce the Brightness to 20. 
13 Expand the Mask 1 properties. Change the Mask Feather property to 70, 70 pixels. 


Pa T me Ro 
Hi 6 Fa 
Masks 


Pm Maski Add 


Mask Path 


5 Mask Feather 


14 Save the project to the Lesson09/Finished_Project folder. Then close the file. 


You can use the face tracker to blur a face, brighten it, or add any other effect. You can also invert 
the mask to affect everything but the face. 
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Review questions 


1 When should you use the Roto Brush tool? 
2 What is the segmentation boundary? 
3 When should you use the Refine Edge tool? 


Review answers 


1 Use the Roto Brush tool any time you would have used traditional rotoscoping. 
It’s particularly useful for removing a foreground element from the background. 


2 The segmentation boundary is the boundary between the foreground and background. 
The Roto Brush tool adjusts the segmentation boundary as you progress through the 
frames in the Roto Brush span. 


3 Use the Refine Edge tool when you need to rotoscope objects with fuzzy or wispy edges. 
The Refine Edge tool creates partial transparency for areas of fine detail, such as hair. 
Use the Refine Edge tool only after you've adjusted the segmentation boundary across 
the entire clip. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 239 


PERFORMING COLOR 
CORRECTION 


Lesson overview 

In this lesson, you'll learn how to do the following: 

e Use a transition to move from one clip to another. 
e Use the Levels effect to correct the color in a shot. 
e Use the mask tracker to track part of a scene. 

e Remove an area using the Keylight (1.2) effect. 

e Use the Auto Levels effect to remove a color cast. 
e Key out an area using the Color Range effect. 

e Correct colors using the Lumetri Color effect. 

e Use the CC Toner effect to create a mood. 


e Copy an object in the scene with the Clone Stamp tool. 


This lesson will take about an hour to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 


com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 
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ee 


PROJECT: SEQUENCE FROM A MUSIC VIDEO 


Most shots require some degree of color correction and 
color grading. With Adobe After Effects, you can easily 
remove color casts, brighten images, and change the 
mood of a clip. 
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Getting started 


As the term implies, color correction is a way of altering or adapting the color of a cap- 
tured image. Strictly speaking, color correction is the act of adjusting the color in a shot 
to correct errors in white balance and exposure, and to ensure color consistency from 
one shot to another. However, you can use the same color-correction tools and tech- 
niques to perform color grading, which is the subjective manipulation of color to focus 
attention on a key element in a shot or to create a color palette for a specific visual look. 


In this lesson, you will correct the color of a video clip that was shot without the 
proper white-balance setting. First, you'll combine two clips from a longer video of 

a young superhero taking off and flying through the sky. Then, you'll apply a variety 
of color-correction effects to clean up and enhance the image. You'll also use mask 
tracking and motion tracking to replace the sky with more dramatic clouds. 


First, you'll preview the final movie and set up your project. 


1 Make sure the following files are in the Lessons/Lesson10 folder on your hard 
disk, or download them from your Account page at www.adobepress.com now: 


e In the Assets folder: storm_clouds.jpg, superkid_01.mov, superkid_02.mov 
e Inthe Sample_Movies folder: Lesson10.avi, Lessonl10.mov 


2 Open and play the Lesson10.avi sample movie in Windows Movies & TV or the 
Lesson10.mov sample movie in QuickTime Player to see what you will create 
in this lesson. When you are done, close Windows Movies & TV or QuickTime 
Player. You may delete the sample movies from your hard disk if you have 
limited storage space. 


When you begin this lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS). When prompted, click OK to delete your 
preferences. 


4 Click New Project in the Home window. 
After Effects opens to display an empty, untitled project. 
5 Choose File > Save As > Save As. 


6 Inthe Save As dialog box, navigate to the Lessons/Lesson10/Finished_Project 
folder. Name the project Lesson10_Finished.aep, and then click Save. 
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Creating the composition 


You'll create a new composition based on the two superkid movie files. 


1 Choose File > Import > File. 


2 Navigate to the Lessons/Lesson10/Assets folder, Shift-click to select the storm_ 


clouds.jpg, superkid_01.mov, and superkid_02.mov files, and then click Import 


or Open. 


3 Inthe Project panel, deselect the assets you imported. Select the superkid_01. 
mov file and Shift-click the superkid_02.mov file, and drag the files onto the 


Create A New Composition button (Œ) at the bottom of the Project panel. 


4 Inthe New Composition From Selection dialog box, do the following: 


Make sure Single Composition is selected. 


In the Options area, choose superkid_01.mov from the Use Dimensions 
From menu. 


Select Sequence Layers. 

Select Overlap. 

For Duration, enter 0:18. 

Choose Dissolve Front Layer from the Transition menu. 


Click OK. 


@ Note: You can add 
transitions after you've 
created a composition 
by selecting the layers, 
choosing Animation > 
Keyframe Assistant > 
Sequence Layers, 

and then selecting 

the options. 


New Composition from Selection 


Type Sze 


ImporterJPEG 556 KB 


QuickTime 16.2 MB 23 
QuickTime 15.6 MB 23 
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Previewing your project on a video monitor 


If possible, perform color correction on a video monitor instead of a computer monitor. The gamma 
values between a computer monitor and a broadcast monitor vary greatly. What may look good 

on a computer screen may be too bright and washed out on a broadcast monitor. Always be sure your 
video or computer monitor is properly calibrated before performing color correction. For instructions 
on calibrating a computer monitor, see After Effects Help. 


Mercury Transmit is a software interface that Adobe digital video applications use to send video 
frames to external video displays. Video device manufacturers AJA, Blackmagic Design, Bluefish444, 
and Matrox provide plug-ins that route the video frames from Mercury Transmit to their hardware. 
The same Mercury Transmit plug-ins work in Adobe Premiere Pro, Prelude, and After Effects. Mercury 
Transmit can also use monitors connected to your computer's video card and FireWire-connected DV 
devices without an additional plug-in. 


1 With a video monitor connected to your computer system, start After Effects. 


2 Choose Edit > Preferences > Video Preview (Windows) or After Effects > Preferences > Video 
Preview (macOS). Then select Enable Mercury Transmit. 


3 Choose a device from the list. Devices with names such as AJA Kona 3G or Blackmagic Playback 
represent video devices connected to your computer. Adobe Monitor devices are the computer 
monitors connected to your video card. Adobe DV requires a DV device connected to a FireWire 
port on your computer. 


4 To change the options for your video device, click Setup next to its name. More options may 
be available in the device's control panel or management application. 


Preferences 


DV Setup Dialog x 


Video Preview 


5 Click OK to close the Preferences dialog box. 
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When Sequence Layers is selected, After Effects places the layers in sequence rather 
than placing them both to start at 0:00. You specified an overlap of 18 frames and 
a transition so that the first clip dissolves into the second. 


After Effects creates a new composition named for the superkid_01.mov file, and 
displays it in the Composition and Timeline panels. 


5 Select the superkid_01 composition in the Project panel, press Enter or Return, 
and rename the composition Taking Flight. Press Enter or Return again to accept 
the change. 


Project = 


Name > Type Size Frame 
EÀ storm_clouds.JPG ImporterJPEG 556 KB ee 


Taking Flight = ) 


E Taking Flight Composition 23 $ $ Source Name 
© superkid_Olmov Œ QuickTime 16.2 MB 23 > Q superkid_01.mov 
D superkid_02.mov E QuickTime 15.6 MB 23 o D superkid_02.mov 


6 Press the spacebar to preview the clips, including the transition, and then press 
the spacebar again to stop the preview. 


7 Choose File > Save to save your work so far. 


Adjusting color balance with levels 


After Effects provides several tools for color correction. Some may do the job with 

a single click, but understanding how to adjust colors manually gives you the greatest 
freedom to achieve the look you want. You'll use the Levels effect to adjust the shadows, 
remove the blue cast, and make the image pop a little more. You'll work on the clips 
individually, starting with the second clip. 


1 Go to 4:00 in the time ruler. 


2 Clickin an empty area of the Timeline panel to deselect the layers. Then, select 
the superkid_02.mov layer. 
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3 Press Enter or Return, rename the layer Wide Shot, and then press Enter 
or Return to accept the new name. 


Taking Flight = 


Layer Name 
[superkid_01.mov] 


D Q 
fe} Wide Shot 


4 With the Wide Shot layer selected, choose Effect > Color Correction > 
Levels (Individual Controls). 


The Levels (Individual Controls) effect may be a little intimidating at first, but it can 
give you great control over your shot. It remaps the range of input color or alpha 
channel levels onto a new range of output levels, functioning much the same as 
the Levels adjustment in Adobe Photoshop. 


| Taking Flight 


ignt - t 

SAR => | Levels ...ividual Controls) 
Channel 

v Histogram 


> RGB 
> Red 


> Green 


> Blue 
> Alpha 
) Clip To Output Black Off for 32 bpc Color 
5 Clip To Output White Off for 32 bpc Color 


The Channel menu specifies the channel to be modified, and the histogram shows 
the number of pixels with each luminance value in the image. When the selected 
channel is RGB, you can adjust the overall brightness and contrast of the image. 


To remove a color cast, you must first know which areas of the image are supposed 
to be gray (or white or black). In this shot, the driveway is gray, the shirt is white, 
and the shoes and goggles are black. 
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5 Open the Info panel. Then, move the cursor over the white frame of the garage 
door. As you move the cursor, the RGB values change in the Info panel. 


In one area of the garage door frame, the RGB values are R=186, G=218, B=239. 
To determine what the values should be, divide 255 (the highest possible RGB 
value) by the highest value in the sample. That gives you 255 divided by 239 (the 
blue value), or 1.08. To equalize the colors so that blue is no longer prominent, 
multiply 1.08 by the original red and green values (186 and 218, respectively). 
The new values (rounded) are 200 for red and 233 for green. 


6 Inthe Effect Controls panel, expand the Red and Green properties. 


7 For the Red Input White value, enter 200; for the Green Input White value, 
enter 233. 


Channel 
v Histogram 


5) Red input Black 

_-) Red Input White 

> Red Gamma 

5) Red Output Black 
5) Red Output White 


5) Green Input Black 


5 Green Input White 


The blue cast is gone, and the image appears warmer. 


@ Note: You may need 
to resize the Info panel 
to see the values. 


) Tip: For an even 
more accurate number, 
sample multiple areas 
of the image that are 
gray or white, average 
those values, and then 
use those numbers 

to determine the 
adjustments. 
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® Note: The Lumetri 
Color effect in After 
Effects is similar to the 
color panel in Premiere 
Pro. To learn more 
about the Lumetri Color 
effect, search for “Color 
workflows” in After 
Effects Help. 


For each channel, the Input settings increase the value, while the Output settings 
decrease the value. For example, lowering the Red Input White value adds red 

to the highlights in the shot, and increasing the Red Output White value adds 
red to the shadows or dark areas in the shot. 


Performing the math lets you zero in on the appropriate settings quickly. If you 
prefer, you could experiment with the settings to find the best values for the footage 
you're using. 


8 Hide the Levels (Individual Controls) properties in the Effect Controls panel. 


Adjusting color with the Lumetri Color effect 


You used the Levels effect to adjust the color balance in the second clip. Now you'll 
use the Lumetri Color effect to do the same for the first clip. 


The Lumetri Color effect provides professional-quality grading and color correction 
tools that you can use to adjust color, contrast, light, and curves. You can apply 
simple color corrections or use more advanced color correction tools. The Lumetri 
Color effect in After Effects works the same as the color panel in Premiere Pro. 


The clip is in pretty good shape, but some fine-tuning will result in a better project. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Select the superkid_01.mov layer in the Timeline panel, press Enter or Return, 
rename the layer Close Shot, and press Enter or Return to accept the new name. 


Taking Flight = 


3 With the Close Shot layer selected, choose Effect > Color Correction > 
Lumetri Color. 


The Lumetri Color effect options appear in the Effect Controls panel. 
4 Inthe Effect Controls panel, expand the Basic Correction category. 


5 Click the eyedropper next to WB Selector in the White Balance section. 
Then click a white area on the boy’s shirt to adjust the white balance. 
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H&G Effe 


| Taking Flight - Close Shot 


A] Lumetri Color | 


v Basic Correction 


O High Dynamic Range 


© Active 
Input LUT None 
v White Balance 
WB Selector 


The White Balance setting determines what the Lumetri Color effect identifies 
as white, which affects the relationship of all other colors. When the white balance 
is appropriate for your image, colors are rendered accurately. 


6 Collapse the Basic Correction category, and expand Curves. 


The curves feature in the Lumetri Color effect lets you adjust color and brightness in 
your video image. You can adjust the curves for the entire image to change the black and 
white levels, or brighten or darken midtones. You can also adjust the curve for a specific 
color channel to balance color or make stylized changes. 


To adjust a curve, click an anchor point and drag. Changes in the image appear imme- 
diately in the Composition panel. 


7 Select the blue color channel, and then click an anchor point and drag the curve 
down slightly to remove the blue color cast in the image. 


g Flight - Close Shot 
v Curves 
E) Active 
v RGB Curves 
© Active 
> 


v RGB Curve 


8 Hide the Lumetri Color options in the Effect Controls panel. 


9 Choose File > Save to save your work. 
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Replacing the background 


These shots were taken on a clear day with few clouds. To add a little drama, you'll 
key out the sky and replace it with storm clouds. You'll start by using the rigid mask 
tracker to mask the sky, and then key out the sky color. Then you'll replace it with 
another image. 


Using the mask tracker 


The mask tracker transforms a mask so that it follows the motion of an object or 
objects in a movie. It’s similar to the face tracker you used in the Extra Credit proj- 
ect in Lesson 9. You can use it to mask a moving object so that you can apply a spe- 
cial effect to it, for example. In this case, you'll use it to track the sky as it shifts in 
a handheld camera. There is a great deal of blue in this clip—in shadows, the cape, 
and other areas—so it would be difficult to key out the sky without first isolating it. 


1 Go to 2:22—the last frame in the first clip before the transition begins. 


2 Select the Close Shot layer in the Timeline panel. Then select the Pen tool (ø) 
from the Tools panel. 


3 Inthe Composition panel, draw a mask that follows the roofline of the buildings. 
Complete the mask outside the image in the Composition panel, as shown below. 
It’s okay if the mask cuts off the boy’s head, because his head doesn’t contain blue 
and won't be keyed out. 


4 With the Close Shot layer selected in the Timeline panel, press the M key 
to display the Mask properties. 


5 Choose None from the Mask Mode menu. 
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Mask modes (blending modes for masks) control how masks within a layer interact 
with one another. By default, all masks are set to Add, which combines the trans- 
parency values of any masks that overlap on the same layer. While Add is chosen, 
areas outside the mask disappear. Choosing None from the Mask Mode menu 
reveals the entire clip in the Composition panel, not just the masked area, so it’s 
easier to edit. 


6 Right-click or Control-click Mask 1, and choose Track Mask. 


After Effects opens the Tracker panel. The mask tracker does not alter the shape of 
the mask to follow a shape; the mask remains the same shape but the tracker can 
change its position, rotation, or scale based on the motion in the clip. You'll use it to 
track the edges of the buildings without having to manually adjust and track the 
mask. Because the scene was shot without a tripod, you'll track the position, scale, 
and rotation of the mask. 


7 Inthe Tracker panel, choose Position, Scale & Rotation from the Method 
menu. Click the Track Selected Masks Backward button (4) to begin tracking 
backward from 2:22. 


Tracker 


Position, Scale & Rot. ` 


8 When the tracking is complete, manually preview the clip to see the mask. If it @ Note: If the mask 
slips out of place, adjust the mask on individual frames. You can shift the entire requires adjustment on 
mask or reposition individual points, but don’t delete any points, as that will ee ee tees 


delete it and draw the 
change the mask for all the frames that follow. mask again. 
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Keying out the sky with Keylight (1.2) 


Now that you've masked the sky, you'll key out the blue in the area that you masked. 
First, you'll duplicate the layer, and then apply mask modes to isolate the mask. 


1 Go to 2:02. Then, select the Close Shot layer, and choose Edit > Duplicate. 
After Effects adds an identical layer, named Close Shot 2, above the Close Shot layer. 
2 Select the Close Shot layer, and choose Subtract from its Mask Mode menu. 


3 Select the Close Shot 2 layer, press M to display its Mask properties, and choose 
Add from its Mask Mode menu. 
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When you apply the Subtract mask mode, the influence of the mask is subtracted 
from the masks above it in the stacking order. The Add mask mode adds the mask 
to the masks above it. In this case, you're ensuring that only the sky will be selected 
in the Close Shot 2 layer. If you zoom in to the Composition window while no layers 
are selected, you can see a faint line where the two layers intersect. 


4 Select the Close Shot layer, and press the M key twice quickly to show all of the 
mask properties for the layer. Reduce the Mask Expansion value to —1.0 pixel. 


The Mask Expansion setting determines how far, in pixels, from the mask path 
the influence of the mask on the alpha channel extends. You’ve shrunk the mask 
on the Close Shot layer so that the two masks don’t overlap. 


5 Hide the properties for the Close Shot layer. 
6 Select the Close Shot 2 layer, and choose Effect > Keying > Keylight (1.2). 
The Keylight 1.2 effect options appear in the Effect Controls panel. 
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7 Select the eyedropper next to Screen Colour, and then sample an area of the sky 
near the boy’s head. 


E Lumetri Color 
Keylight (1.2) 
v About 


KEYLIGHT 


View Final Result 
2 multiply Result 


©} Screen Colour 


Most of the sky is keyed out, but if your mask overlapped any of the shadowy areas 
of the buildings, they’re probably affected too. You'll use Screen Balance to fix that. 


8 Change the Screen Balance to 0. 
The buildings lighten up. 


Screen Balance determines how saturation is measured: With a balance of 1, satu- 
ration is measured against the smaller of the other two components in the color; 
with a balance of 0, it’s measured against the larger of the two; with a balance of 0.5, 
it’s measured from the average of the two. Generally speaking, blue screens work 
best with a balance around .95 and green screens with a balance around 0.5, but it 
varies depending on the colors in the image. For many clips, try setting the balance 
closer to 0, and then closer to 1, to see what works best. 


9 Click the Toggle Transparency Grid button (Œ) in the Composition panel 
to see the keyed-out area clearly. 


10 Expand the Screen Matte category in the Effect Controls panel, and then change 
the Clip White value to 67. 


KEYLIGHT 


Final Result 
E) unpremultiply Result 
|__| aa 


creen Gain 


creen Balance 
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The screen matte is the matte that remains when you've keyed out other parts of 
the image. Sometimes parts of the matte are accidentally keyed out. The Clip White 
value turns the gray (transparent) pixels to white (opaque). 


This process is very similar to adjusting Levels for a layer. Anything above the Clip 
White value is considered pure white. Likewise, the Clip Black value makes anything 
below the value completely black. 


11 Make sure Final Result is chosen in the View menu at the top of the Keylight 
(1.2) area in the Effect Controls panel. 


12 Hide the properties for the Close Shot 2 layer. 


Adding a new background 
With the original sky keyed out, you're ready to add the clouds to the scene. 


1 Click the Project tab to display the Project panel, and then drag the storm_ 
clouds.jpg file to the Timeline panel, placing it below the Close Shot layer. 


2 Drag the end of the storm_clouds layer to align with the end of the Close Shot layer. 
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Now the clouds are there, but they're not very dramatic. You'll make them larger and 
adjust their position. 


3 Press the S key to display the Scale property for the layer, and change the amount 
to 222%. 


4 Press Shift+P to display the Position property for the layer, and change the value 
to 580.5, 255.7. 
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Color-correcting using Auto Levels 


Although the storm clouds are dramatic, the contrast of the image and the color 
cast don’t really match the foreground elements. You'll use the Auto Levels effect 
to correct that. 


The Auto Levels effect automatically sets highlights and shadows by defining the 
lightest and darkest pixels in each color channel as white and black, and then redistrib- 
uting intermediate pixel values proportionately. Because Auto Levels adjusts each 
color channel individually, it may remove or introduce a color cast. In this case, 
with the default settings applied, Auto Levels removes the orange cast and balances 
the shot. 


1 With the storm_clouds layer selected in the Timeline panel, choose Effect > 
Color Correction > Auto Levels. 


Project i & Effect Controls s 
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The Black Clip and White Clip values determine how much of the shadows and 
highlights (respectively) are clipped to the new extreme shadow and highlight colors 
in the image. Setting the clipping values too high reduces detail in the shadows or 
highlights; 1% is as high as is typically recommended. 


3 Choose File > Save to save your work. 


Motion tracking the clouds 


The clouds are in place, and they’re looking good. But if you scrub through the clip, 
you'll notice that the clouds are static while the foreground moves due to camera 
motion. The clouds should travel with the foreground. You'll use motion tracking 
to solve this problem. 


After Effects tracks motion by matching pixels from a selected area in a frame 
to pixels in each succeeding frame. Tracking points designate the areas to track. 
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1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Select the Close Shot layer in the Timeline panel, right-click or Control-click the 
layer, and choose Track & Stabilize > Track Motion. 


> 
Mask and Shape Path > 
Quality > 
i >:| 
~ Keyframe Assistant — 5j 
Track Camera 
Open > Warp Stabilizer VFX 
Reveal > 
Create > Track Mask 


After Effects displays the Close Shot layer in the Layer panel and makes the Tracker 
panel active. 


3 Inthe Tracker panel, select the Position, Rotation, and Scale options. 


Tracker 


ce; Close Shot 


k: Tracker 1 


Transform 


@ Note: You'll learn After Effects displays two track points in the Layer panel. The outer box in each track 
more about tracking point represents the search region (the area After Effects scans); the inner box is the 
objects in Lesson 14, 
“Advanced Editing 
Techniques.’ For help 4 
working with track 

points, see “Moving 

and resizing the track to track an area with strong contrast. 
points” on page 350. 


an 


feature region (what After Effects is searching for); the center “x” is the attach point. 


Click an empty area in the inner box (the feature region) of the first track point, 
and drag the entire track point to the corner of the house on the left. You want 


5 Click an empty area in the feature region of the second track point, and drag 
the entire track point to the peak of the roof across from the first track point. 
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6 Inthe Tracker panel, click Edit Target. Then, in the Motion Target dialog 
box, choose 3. storm_clouds.jpg from the Layer menu. Click OK. 


Tracker 


ra Motion Target x 
Close Shot i 


k: Tracker 1 


e: Transform 


als 


After Effects applies the tracking data to the target layer. In this case, it will track 
the motion of the Close Shot layer, and apply that tracking data to the storm_ 
clouds.jpg layer so that they move in sync. 


7 Click the Analyze Forward button (®) in the Tracker panel. You may need 
to scroll down to see all the options in the panel. 


After Effects analyzes the positions of the tracking regions frame by frame to track 
the camera movement in the clip. 


8 When the analysis is complete, click Apply in the Tracker panel. Click OK to apply 
the data for both the x and y dimensions. 


9 Switch back to the Composition panel, and scrub backward through the timeline. 
The clouds move with the foreground elements. Hide the Close Shot layer 
properties to keep the Timeline panel tidy. 


Because you selected Scale in the Tracker panel, After Effects resized the layer as 
necessary to sync it with the Close Shot layer. The clouds are no longer in the same 
position. You'll adjust the anchor point for the layer. 


10 Select the storm_clouds.jpg layer in the Timeline panel, and press the A key to 
display its Anchor Point property. Change the Anchor Point position to 313, 601. 


11 Press A to hide the Anchor Point property, and choose File > Save to save your 
work so far. 
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Replacing the sky in the second clip 


You'll use a similar process to replace the sky in the second clip, with a few 
differences. You'll use the Color Range effect to key out the sky instead of the 
Keylight (1.2) effect. 


Creating the masks 


As you did with the first clip, you'll start by drawing a mask to isolate the sky so you 
won't key out all the blue in the image. You'll use the mask tracker to ensure the 
mask stays in the right position throughout the clip. 


1 Go to 2:23 in the time ruler—the first frame in the second clip. 


2 Click the Video switch (#») in the Timeline panel for the Close Shot, Close Shot 
2, and storm_clouds.jpg layers to hide them so that you can see the full Wide 
Shot clip clearly. 


3 Select the Wide Shot layer in the Timeline panel. 


4 Select the Pen tool (ø) in the Tools panel, and then follow the edges of the 
buildings to draw a mask around the bottom of the image, omitting the sky. 
Make sure the boy’s blue pants are entirely within the shape you draw, so they 
won't be keyed out with the sky. 


5 Select the Wide Shot layer again, and then press Ctrl+D (Windows) or 
Command+D (macOS) to duplicate the layer. 
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A new Wide Shot 2 layer appears above the original Wide Shot layer in the 
Timeline panel. 


6 Select the original Wide Shot layer, and press the M key twice to reveal 
the mask properties for the layer. Change the Mask Expansion value to 1 pixel. 


The influence of the mask expands by 1 pixel beyond its outline. 
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7 Select the Wide Shot 2 layer, press the M key twice to reveal the mask properties 
for the layer, and then select Inverted. 


Mask 1 v Inverted 
5) Mask Path e 

5) Mask Feather = 0.0,0.0 pixels 

5 Mask Opacity 


5 Mask Expansion 
& Wide Shot 


Path 
") Mask Feather > 0.0 pixels 
D) Mask Opacity 100% 
5 Mask Expansion pixels 


The area that is masked in the Wide Shot 2 layer is inverted: What is masked in the 
Wide Shot layer is not in the Wide Shot 2 layer, and vice versa. To see this clearly, 
temporarily hide the Wide Shot layer and then show it again. 


8 Select Mask 1 in the Wide Shot 2 layer, right-click or Control-click Mask 1, 
and then choose Track Mask. 


9 Inthe Tracker panel, choose Position from the Method menu, and then click 
the Track Selected Masks Forward button (P). 


The mask tracker tracks the mask as the camera moves. 


10 When the analysis is complete, go to 2:23 in the time ruler again. Under the 
Wide Shot layer, right-click or Control-click Mask 1, and choose Track Mask. 


11 In the Tracker panel, choose Position from the Method menu, and then click 
the Track Selected Masks Forward button (P). 


12 Hide the properties for all layers. 


Keying out an area with the Color Range effect 


The Color Range effect keys out a specified range of colors. This key effect is espe- 
cially useful where the color to be keyed is unevenly lit. The sky in the Wide Shot 
clip ranges in color from a deep blue to a lighter shade near the horizon—a perfect 
candidate for the Color Range effect. 


1 Go to 2:23 in the time ruler. 


2 Select the Wide Shot 2 layer in the Timeline panel, and choose Effect > Keying > 
Color Range. 
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Ð Tip: If you're typing 
the values, press Tab 
to jump between 

the fields. 


3 Select the Key Color eyedropper, next to the Preview window in the Effect Controls 
panel. Then, in the Composition panel, click a midtone blue color in the sky to 
sample it. 


W í Effect Controls 


ight - Wide Shot 2 
&§ Levels ..ividual Controls) 


: 


v Preview 


The keyed-out area appears black in the Preview window in the Effect Controls panel. 


4 Select the Add To Key Color eyedropper in the Effect Controls panel, and then 
click another area of the sky in the Composition panel. 


5 Repeat step 4 until the entire sky has been keyed out, including the clouds. Don’t 
worry about the boy’s shirt being affected; the cloud color will match it later. 


| Taking Flight - Wide Shot 2 
> fx B Levels ..ividual Controls) 


A Color Range | 


v Preview 


Adding a new background 


With the original sky keyed out, you're ready to add the storm clouds to the scene. 


1 Click the Project tab to display the Project panel. Then drag the 
storm_clouds.jpg item from the Project panel to the Timeline panel, 
placing it below the Wide Shot layer. 


2 With the storm_clouds layer selected in the Timeline panel, press the S key to display 
its Scale property, and then increase the Scale values to 150, 150%. 


3 With the storm_clouds layer still selected in the Timeline panel, press P to 
display its Position property. Then change the position values to 356, 205 
or the position you prefer. 
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4 With the storm_clouds layer selected, choose Effect > Color Correction > Auto 
Levels. Change the White Clip value to 1.00%. 


femporal Smoothing (secon 


> © Black Clip 
> © White Clip 
> © Blend With Original 


Motion tracking the shot 


Again, because the clip was shot without a tripod, the camera shifts. The clouds 
should shift with it. You'll track the motion to sync the clouds with the foreground 
elements, just as you did for the other clip. 


1 Make sure the current-time indicator is at 2:23. Then select the Wide Shot layer, 
right-click or Control-click it, and choose Track & Stabilize > Track Motion. 


2 Inthe Tracker panel, select the Position, Rotation, and Scale options. 


3 Click in the feature region (the inner box) of one of the track points, and drag 
it to the peak of the roof of the house on the far right. Then, drag the feature 
region of the other track point to the peak of the house straight across from it, 
as in the illustration. 


4 Inthe Tracker panel, click Edit Target. In the Motion Target dialog box, choose 
6. storm_clouds.jpg from the Layer menu, and click OK. Make sure you select 
the second storm_clouds.jpg file, and not the first one (layer 3); you want the 
one that is associated with the Wide Shot layer. 


Tracker 


Motion Target x 


Wide Shot 
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e: Transform 
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5 Click the Analyze Forward button in the Tracker panel. 


6 When the analysis is complete, click Apply in the Tracker panel. Click OK to apply 
the data to both the x and y dimensions. 


7 Click the Composition: Taking Flight tab in the Composition panel to make 
it active. Then scrub through the clip to watch the clouds in sync with the 
other elements. 


The clouds follow the movement of the camera, but because the layer was scaled, 
they may not be in the right position. 


8 Hide the properties for all layers. 


9 Make sure no layers are selected. Then, select the storm_clouds.jpg layer at 
the bottom of the layer stack, and press the A key to reveal the Anchor Point 
property. Adjust it so that it looks right. We used 941, 662. 


Taking Flight = 


Layer Name 


Close Shot 2 


Ð p 


Close Shot 

B [storm_clouds.JPG] 
Wide Shot 2 

D Wide Shot p 
permea 


5 Anchor Point 


BD p p P 


10 Make the Close Shot, Close Shot 2, and first storm_clouds.jpg layers visible again. 


11 Choose File > Save to save your work so far. 


Color grading 


So far, the color changes you’ve made have been to correct inaccurate white bal- 
ances or to match color between clips. You can also change color and tone to 
create a mood or otherwise enhance a movie. You'll make some final adjustments 
to give the entire movie a steely blue color, make the image soft and dreamy, and 
add a vignette. 


Using CC Toner to map colors 


CC Toner is a color-mapping effect based on the luminance of the source layer. You 
can map two (duotone), three (tritone), or five (pentone) colors. You'll use it to map 

a cold blue color to bright areas of the clip, a steely blue to the midtones, and a darker 
blue to darker areas of the clip. 
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1 Choose Layer > New > Adjustment Layer. 


You can use an adjustment layer to apply an effect to all the layers beneath it at once. 
Because it’s on a separate layer, you can also hide or edit the layer and automatically 
affect its influence on all the other layers. 


2 Move the Adjustment Layer 1 layer to the top of the Timeline panel, if it’s not 
already there. 


3 Select the Adjustment Layer 1 layer, press Enter or Return, rename the layer 
Steel Blue, and press Enter or Return again. 


4 Select the Steel Blue layer, and choose Effect > Color Correction > CC Toner. 
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5 Inthe Effect Controls panel, choose Pentone from the Tones menu. 
Then do the following: 


e Click the Brights color swatch, and choose a cold blue color. 
(We used R=120, G=160, B=190.) 

e Click the Midtones color swatch, and choose a darker, steely blue . 
(We used R=70, G=90, B=120.) 

e Click the Darktones color swatch, and choose a much darker blue. 


(We used R=10, G=30, B=60.) 
e Change the Blend With Original value to 75%. 


5 Midtones 
5) Darktones 
) Shadows 


© Blend w. Original 
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Adding a blur 


You'll add a blur to the entire project. First you'll precompose the layers, and then 
you'll create a partially visible blurred layer. 


1 Select all of the layers in the Timeline panel, and choose Layer > Pre-Compose. 


Precomposing layers moves them to a new composition, making it easier to affect 
all the layers in a composition at once. 


2 Inthe Pre-Compose dialog box, name the composition Final Effect, and select 
Move All Attributes Into The New Composition. Then click OK. 


Pre-compose x 
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After Effects replaces all the layers in the Taking Flight composition with a single 
layer named Final Effect. 


3 Select the Final Effect layer, and choose Edit > Duplicate to make a copy of it. 
4 With the top layer selected, choose Effect > Blur & Sharpen > Gaussian Blur. 


5 In the Effect Controls panel, change the Blurriness to 40. 


ect & Effect Contro! 
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The effect is too strong. You'll reduce the opacity of the layer that contains the effect. 
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6 With the top layer selected, press the T key to reveal the Opacity property 
for the layer. Change its value to 30%. 


Taking Flight = 


Adding a vignette 


You'll use a new solid layer to create a vignette for the movie. 


1 Choose Layer > New > Solid. Solid Settings x 


2 Inthe Solid Settings dialog box, 
do the following: 


e Name the layer Vignette. 


e Click the Make Comp Size 
button. 


e Change the color to black 
(R=0, G=0, B=0). 


e Click OK. 


3 Select the Ellipse tool (®), hidden beneath the Rectangle tool (ŒM) in the Tools 
panel, and then double-click the Ellipse tool to add an elliptical mask that is 
automatically sized to fit the layer. 


4 Inthe Timeline panel, select the Vignette layer, and press the M key twice to 
reveal the mask properties. Change the Mask Mode to Subtract, and change 
the Mask Feather value to 300 pixels. 
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5 Press the T key to reveal the Opacity property, and change its value to 50%. 


Taking Flight = 


6 Hide the properties for all layers. 
7 Preview your movie! 


8 Save the file. 
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Extra credit 


Cloning an object in a scene 

You can copy an object, and then use motion tracking to ensure it remains in sync with the rest 

of the scene. You'll use the Clone Stamp tool to place a second light on the other side of the door 
in the background of the Close Shot clip. Cloning in After Effects is similar to cloning in Photoshop, 
but in After Effects, you can clone across the entire timeline, rather than in a single image. 


1 Press the Home key or move the current-time indicator to the beginning of the time ruler. 

2 Double-click the lower Final Effect layer in the Timeline panel to open the Final Effect composition. 
You want to make the change to the copy of the composition that is not blurred. 

3 Double-click the Close Shot layer in the Timeline panel to open it in the Layer panel. 

You can paint only on individual layers—not on the composition as a whole. 

4 Select the Clone Stamp tool in the Tools panel. 


The Clone Stamp tool samples the pixels on a source layer and applies the sampled pixels to a target 
layer; the target layer can be the same layer or a different layer in the same composition. 
When you select the Clone Stamp tool, After Effects adds the Brushes and Paint panels to the stack. 


5 Open the Brushes panel and enlarge it if necessary. Then change the Diameter to 10 pixels and 
the Hardness value to 60%. 


6 Enlarge the Paint panel. Make sure the Mode is set to Normal and the Duration to Constant. 
The source should be set to Current Layer. Select Aligned and Lock Source Time, and make 
sure the Source Time is set to 0 frames. 


Normal 
RGBA 


Constant 


Source: Current Layer 


q 


Pen Pressure 


The Constant setting applies the Clone Stamp effect from the current time forward. Because you're 
starting at the beginning of the timeline, the changes you make will affect every frame in the layer. 


(continued on next page) 
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Ext ra cred it (continued) 


When Aligned is selected in the Paint panel, the position of the sample point—the clone position— 
changes for subsequent strokes to match the movement of the Clone Stamp tool in the target Layer 
panel so you can use multiple strokes to paint the entire cloned object. The Lock Source Time option 
lets you clone a single source frame. 


7 Inthe Layer panel, position the cursor at the top of the lamp. Alt-click (Windows) or Option-click 
(macOS) to designate a source point for cloning. 


8 Click next to the left side of the door, and then click and drag to clone the light. Be careful not to clone 
part of the door in the process. If you make a mistake, undo and start over with a new source point. 


B Tip: If you make a mistake, 

just press Ctrl+Z (Windows) or 
Command+Z (macOS) to undo the 
stroke, and then try again. 


9 When the second light is in place, scrub through the clip. The cloned light remains stationary while 
the rest of the scene moves; it isn’t in sync with the side of the building. You'll use tracking data to 
fix the problem. 


10 Inthe Timeline panel, expand the properties for the Close Shot layer, and then expand the Motion 
Trackers, Tracker 1, and Track Point 1 properties. Then, still in the Close Shot layer, expand the 
Effects, Paint, Clone 1, and Transform: Clone 1 properties. 


11 Drag the pick whip for the Transform: Clone 1 
Position property to the Track Point 1: Attach 
Point property, and release it. (You may need 
to enlarge the Timeline panel to see both 
properties at once.) 


The expression you created ties the position of the 
cloned light to the tracking data you created for 
the clip earlier in the lesson. The light will travel 
with the image. But it may be in the wrong place. 
You can correct its relationship to the door by 
adjusting its anchor point. 


12 Adjust the Transform: Clone 1: Anchor Point Clo ; Normal 


property until the light is positioned next to 
the door. 


You might need to zoom out to see where the light 
is while adjusting the anchor point values. Your 
values will probably be different from ours. 


13 Scrub through the clip to verify that the light is positioned properly. When your're satisfied that it 
is, close the Close Shot tab in the Layer panel and the Final Effect composition tab in the Timeline 
panel. Preview the entire composition to see your work. 


14 Choose File > Save to save your work. 
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Review questions 


1 What’s the difference between color correction and color grading? 
2 How can you key out a background in After Effects? 


3 When would you use the mask tracker? 


Review answers 


1 Color correction is performed to correct errors in white balance and exposure or to 
ensure color consistency from one shot to another. Color grading is more subjective; 
its goals are to optimize the source material, to focus attention on a key element in the 
shot, or to create a color palette to match the visual look the director prefers. 


2 There are multiple options in After Effects for keying out a background. In this lesson, 
you used Keylight (1.2) and the Color Range effect to key out the background so that you 
could replace it with another. 


3 Use the mask tracker when you need to track a mask that does not change shape, but 
that does change position, scale, or rotation through a clip. For example, you can use 
it to track a person in an action shot, a wheel, or an area of the sky. 
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CREATING MOTION 
GRAPHICS TEMPLATES 


Lesson overview 


In this lesson, you'll learn how to do the following: 


Add controls to the Essential Graphics panel. 

Create checkboxes to select a background image. 

Protect portions of a project from time-stretching. 

Export a Motion Graphics template (.mogrt) file. 

Create master properties for layers in nested compositions. 
Work with a Motion Graphics template in Adobe Premiere Pro. 


Create master properties. 


This lesson will take about an hour to complete. If you haven't already 


done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


EPISODESK LIGHT IN THE DIS 


PROJECT: MOTION GRAPHICS TEMPLATE FOR TV SHOW TITLE SEQUENCE 


With Motion Graphics templates, you can preserve 
the style and settings for a project while giving 
colleagues control over specific editorial decisions 
in Adobe Premiere Pro. 
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Getting started 


Using the Essential Graphics panel in After Effects, you can create Motion Graphics 
templates that let your colleagues edit aspects of the composition in Adobe Premiere 
Pro. You decide which properties are editable as you create the template, and then you 
can share the template using Creative Cloud libraries or by sending your colleague the 
Motion Graphics template (.mogrt) file. 


You'll create a Motion Graphics template for the title sequence of a noir television 
show in which the main title text needs to remain constant but the episode subtitle, 
background images, and effect settings can change. 


First, you'll preview the sample movie and then set up the project. 


1 Make sure the following files are in the Lessons/Lesson11 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: Embrace.psd, Holding_gun.psd, Man_Hat.psd, and 
Stylized_scene.psd 


e Inthe Sample_Movies folder: Lesson_11.avi, Lessonl1.mov 


2 Open and play the Lesson11.avi sample movie in Windows Movies & TV 
or the Lesson11.mov sample movie in QuickTime Player to see what you 
will create in this lesson. When you are done, close Windows Movies & TV 
or QuickTime Player. You may delete the sample movies from your hard disk 
if you have limited storage space. 


When you begin this lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+Alt+Shift (Windows) 
or Command+Option+Shift (macOS). When prompted, click OK to delete your 
preferences. Click New Project in the Home window. 


After Effects opens to display an empty, untitled project. 
4 Choose File > Save As > Save As. 


5 In the Save As dialog box, navigate to the Lessons/Lesson11/Finished_Project 
folder. Name the project Lesson11_Finished.aep, and click Save. 


Preparing a master composition 


To create a template, you first need to create an After Effects composition upon 
which the template will be based. You'll create a master composition that contains 
the background image assets and an animated title and subtitle. 


Creating Motion Graphics Templates 


Creating the composition 
First, import the assets, and create the composition. 
1 Double-click an empty area of the Project panel to open the Import File dialog box. 


2 Navigate to the Lessons/Lesson11/Assets folder on your hard disk, and then 
Shift-click to select all four PSD files. Click Import or Open. 


3 Click the New Composition button in the Composition panel. 

4 Inthe Composition Settings dialog box, do the following, and then click OK: 
e Name the composition Title sequence. 
e Choose HDTV 1080 25 from the Preset menu. 
e Enter 10:00 for the Duration. 


e Select black for the Background Color. 


e: Title sequence 


t: HDTV 1080 25 


IE 


o: Square Pixels 


jon: ©00:10:00 


EA] 


Displaying a background file will make it easier to position your text. 
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Adding animated text 


The project includes a series title that appears at the top of the screen and moves 
down as it grows larger, and an episode title that appears letter by letter and then 
later explodes off the screen. You'll create both layers and animate them. 


1 Select the Horizontal Type tool (T) in the Tools panel, and click an insertion 
point in the Composition panel. 


After Effects adds a new layer to the Timeline panel and opens the Character panel. 
2 Type Shot in the Dark in the Composition panel. 


3 Inthe Character panel, click next to the font name to open the font menu. 
If you do not already have Calder Dark Grit Shadow and Calder Dark fonts 
on your system, click Add Adobe Fonts, and then activate the fonts using Adobe 
Fonts. Or choose a different font in the following step. 


4 With the text selected in the Composition panel, select the following settings 
in the Character panel: 


e Font Family: Calder 

e Font Style: Dark Grit Shadow 
e Fill Color: White 

e Stroke: None 

e Font Size: 140 px 

e Tracking: 10% 


5 Select the Selection tool (}), and then position the title in the center of the top 
half of the scene in the Composition panel. 


SHOT INSEHBEDARK 


Ny 


[Embrace.psd] 
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6 Go to 2:00. With the Shot in the Dark layer selected, press P and then Shift+S 
to see both the Position and Scale properties. Click the stopwatch next to each 
of the properties to create initial keyframes. 


Title sequence 


ic Mame 


T [Shot in the Dark + 


Scale 
[Embrace.psd} 


7 Press the Home key to go to the beginning of the time ruler. Change the scale 
to 50%. With the Selection tool, drag the title so that it is centered at the top 
of the Composition panel. After Effects creates keyframes for the Scale and 
Position properties. 


SHOT Ip DAR 


\ 
— — Un g 
- $ 


T {Shot in the Dark 4 


p: f 


8 Go to 2:10. Then, select the Horizontal Type tool in the Tools panel again, 
and type Episode 3: A Light in the Distance in the Composition panel. 


9 Select the text in the Composition panel, and then make the following changes @ Note: If you didn't 
to settings in the Character panel: activate Calder Dark 
from Adobe Fonts in 
e Font Family: Calder step 3, activate it now, 
or choose a different 
e Font Style: Dark font in step 9. 


e Font Size: 120 px 


e Horizontal Scale: 50% 


SHOT INSTH, 
ki 
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10 Go to 9:00. In the Effects & Presets panel, type explosion in the search bar. Then 
select the Explosion 2 animation preset, and drag it onto the Episode 3 layer in 
the Timeline panel. 


11 Go back to 2:10. In the Effects & Presets panel, type typewriter in the search bar. 
Then select the Typewriter animation preset, and drag it onto the Episode 3 layer 
in the Timeline panel. 


Title sequence 


ope ü s Layer N Rs 


o 


> y sti P È Text 
o a Animate In 
o E [Embrace.psd] + + (Typewriter | 


~N fx * Animation Presets 


12 Go to 9:00 again. Select the Selection tool in the Tools panel, and then center the 
text in the bottom third of the screen. 


Title sequence 


T Shot in the Dark 
[Embrace.psd] 


13 Press the Home key or move the current-time indicator to the beginning of the 
time ruler. Then press the spacebar to preview the movie. Press the spacebar 
again to stop playback. 


SHOT INFH SHOT INFH RK 


uM iy © 


SHOT IN“FH 


uy 


14 Hide the properties for both text layers, and then choose File > Save to save your 
work so far. 
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Animating a background image 


You’ve animated the text, but the background image just sits there. Because this is a 
noir series, you'll add an unsettling effect. You'll use an adjustment layer to apply the 
effect only after the text has appeared on the screen. 


1 Select the Embrace.psd layer in the Timeline panel. 
2 Choose Layer > New > Adjustment Layer. Rename the layer Background effect. 


After Effects creates a new adjustment layer immediately above the layer you 
selected. The adjustment layer will affect all layers below it. 


3 Go to 5:00. Then press Alt+[ (Windows) or Option+[ (macOS) to trim the layer 
so that its in point is at 5 seconds. 


Title sequence 


T Episode 3: A Light in the Distance 
F Shot in the Dark P 
w 


[Embrace.psd} 


4 Inthe Effects & Presets panel, type bad TV in the search bar. Then select the 
Bad TV 3 - weak animation preset, and drag it onto the Background effect layer 
in the Timeline panel. 


EPISODE 3: A LIGHT IN THEBISTANCE 


5 Press the Home key or move the current-time indicator to the beginning of the 
time ruler. Then press the spacebar to preview the movie. Press the spacebar 
again to stop playback. 


The series title slides down, the episode title appears, and then the image becomes 
distorted. Near the end of the time ruler, the episode title explodes off the screen. 
The image is challenging to see once the effect is applied. You can change a setting 
in the effect to make the image clearer. 
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6 Inthe Effect Controls panel, choose Smooth Noise from the Wave Type menu. 
Then preview the sequence again to see the difference. 


{SHOT INSTH 
j 


aaa 


EPISODE 3: A LIGHT IN THORS TANCE 


7 Choose File > Save to save your work so far. 


Setting up a template 


You use the Essential Graphics panel to build custom controls and share them 

as Motion Graphics templates. Drag properties into the panel to add controls you 
want to make editable. In the panel, you can customize the names of controls, and 
you can group them to help others understand their function. You can open the 
Essential Graphics panel separately, or select the Essential Graphics workspace 

to open the panels you're most likely to use in creating a template, including the 
Effects & Presets panel. 


1 Choose Window > Workspace > Essential Graphics. 


2 Inthe Essential Graphics panel, choose Title sequence from the Master menu. 
Your template will be based on the Title sequence composition. 


3 Type Shot in the Dark sequence for the template name. 


Shot in the Dark sequence 


Title sequence 


Creating Motion Graphics Templates 


Adding properties to the 
Essential Graphics panel 
You can add the controls for most effects, transform properties, and text properties 


to Motion Graphics templates. You'll give your colleagues options to replace the 
episode title and adjust it, and to adjust the settings of the Bad TV - weak effect. 


Making the text editable 


The episode title for this title sequence will change for each episode, so the editor 
needs to be able to edit the text. For every text layer, there is a source text property 
that you can add to the Essential Graphics panel. 


1 Inthe Timeline panel, expand the Text properties for the Episode 3 layer. 


2 Drag the Source Text property into the Essential Graphics panel. 


3 Click the Source Text label in the Essential Graphics panel, select the text, and 


then type Episode title. 
4 Click Edit Properties next to the Episode title property, select Enable Font Size @ Note: You can add 
Adjustment, and click OK. dropdown menus 


to motion graphics 
templates for most 
properties that you 
might use checkboxes 
or sliders for. Dropdown 
boxes require some 
scripting. See After 
Effects Help for more 
information. 


Episode 3: A Light in the Distance 


O 


A text size slider appears beneath the Episode title property in the Essential 
Graphics panel. 
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5 Inthe Timeline panel, select the Episode 3 layer, and press P to display the Position 
property. Then, drag the Position property into the Essential Graphics panel. 


The episode title text, font size, and position will be editable to Motion Graphics 
template users; other attributes are protected from editing. 


Adding effects properties 


Many effects properties can be included in Motion Graphics templates. You can see 
which properties in a composition are compatible with the Essential Graphics panel 
by clicking Solo Supported Properties. You'll add properties to change the appear- 
ance of the effect, which may need to be lighter or darker depending on the back- 
ground image selected. 


1 Inthe Essential Graphics panel, click Solo Supported Properties to display only 
the properties you can add in the Timeline panel. 


2 Inthe Timeline panel, hide the properties for the Shot in the Dark and Episode 3 
layers, because you don’t need to add any more text properties to the template. 


3 Under the Color Balance properties for the Background effect layer, drag 
Lightness into the Essential Graphics panel. Then, drag Saturation into the 
Essential Graphics panel. 


4 Under the Noise properties for the Background effect layer, drag Amount of Noise 


into the Essential Graphics panel. 


5 Drag the sliders in the Essential Graphics panel to see how the appearance 
of the effect changes. Press Ctrl+Z or Command+Z to undo any changes 
you made. 


Creating Motion Graphics Templates 


Grouping properties 


It’s hard to tell what the properties currently in the Essential Graphics panel affect. 
You could change each of their names to make their effect clear, but it’s easier to 
group them. You'll create groups for properties related to the episode title and those 
related to the background effect. 


1 Choose Add Group from the menu at the bottom of the Essential Graphics 
panel. (By default, it says Add Formatting.) 


2 Name the group Episode title, and then drag the Episode title and Episode title 
position properties into the group. The Size slider travels with the Episode 
title property. 


3 Deselect all properties, choose Add Group from the menu again, and then name 
the new group Background effect. 


4 Drag the Saturation, Lightness, and Amount of Noise properties into the 
Background effect group. 


5 Hide the properties for all layers in the Timeline panel, and then choose File > 
Save to save your work so far. 
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Creating master properties 


The Essential Graphics panel lets you create Motion Graphics templates. However, 
you can also use it to create master properties, which give you access to specific 
properties within nested compositions. Using master properties, you can retain 
quick access to properties you need to edit frequently without having to open the 
nested composition and find the properties for a specific layer. 


To specify master properties, open the nested composition. In the Essential Graphics 
panel, choose the nested composition from the Master menu. Then drag proper- 
ties from layers in the composition to the Essential Graphics panel. You can rename 
them and group them just as you do when creating a template. 


To use the master properties, just expand the properties for the nested composi- 
tion in the Timeline panel, and then expand Master Properties. They appear just as 
you've set them up in the Essential Graphics panel. 


Providing image options 


For this template, you want to provide editors with a choice of background images 
that are appropriate for different episodes. There are multiple ways to do this, but 
you'll add checkboxes so they can toggle the visibility of each image. 


First, you'll add the images to the Timeline panel. 


1 Select the Project tab to bring the panel forward. Then drag the Holding_Gun.psd, 


Man_Hat.psd, and Stylized_Scene.psd files to the bottom of the Timeline panel. 


The adjustment layer named Background effect will affect all the layers beneath it in 
the Timeline panel. 


2 Inthe Timeline panel, select the Embrace.psd layer, and then Shift-select the 


Stylized_scene.psd layer to select all four image layers. Then, choose Effect > 
Expression Controls > Checkbox Control. 


Creating Motion Graphics Templates 


After Effects adds the Checkbox Control effect to each of the selected layers. 
3 With all four layers still selected, press T to display their Opacity properties. 


For each layer, you'll create an expression that ties the Opacity property to the 
appropriate checkbox. 


4 Deselect all layers, and then select the Embrace.psd layer. 


5 Drag the pick whip for the Opacity property in the Embrace.psd layer 
to the Checkbox property in the Effect Controls panel. 


Title sequence 


0:00;00:00 


(oen > . 
o T Episode 3: A Light in the Distance 

T Shot in the Dark i 

W 3 W Background effect 4 

B: HCO 


6 Expand the Opacity property to see the expression. 


After Effects created the default expression effect (“Checkbox Control”)(“Checkbox”), 
which identifies the related effect. You want to set the opacity to 100% when the 
checkbox is selected, so you'll add that instruction to the expression. 


7 Type *100 at the end of the existing expression. 


8 Repeat steps 4—7 for each of the other image layers. 


0:00:00:00 


ome a er Name 
[Embrace.psd) 


[Holding_gun.psd] 


[Man_Hat.psd] 


Now youre ready to add the controls to the Essential Graphics panel. 


9 Select all four image layers in the Timeline panel, and press E to display the effects 
for each layer. 
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10 In the Embrace.psd layer, expand the Checkbox Control properties to see 
the Checkbox property. Then drag the Checkbox property into the Essential 
Graphics panel. 


11 Rename the Checkbox property Embrace. 


12 Repeat steps 10—11 for each of the other layers, renaming the Checkbox 
properties Holding gun, Man in hat, and Stylized, respectively. 


13 Choose Add Group from the menu at the bottom of the Essential Graphics 
panel, and name the group Background images. 


14 Drag the image checkboxes into the Background images group. 


15 Choose Add Comment from the menu at the bottom of the Essential Graphics 
panel. Then, type Toggle on the image you want to use. 


16 Drag the comment to the top of the Background images group, and then drag 
the Background images group above the Background effect group. 


Toggle on the image you want to use 


Now the template controls are tidy and easy to understand. 
17 Select one of the checkboxes to display a default background image. 


18 Hide the properties for all layers in the Timeline panel, and then choose File > 
Save to save your work so far. 


Protecting the timing of a section 


The Responsive Design features in After Effects and Premiere Pro let you author adap- 
tive motion graphics. The Responsive Design — Time feature, specifically, preserves 
the duration of time in a particular region of a composition in a Motion Graphics 
template while enabling time stretching in unprotected regions. You can preserve 
the timing of specific areas in compositions you export as Motion Graphics tem- 
plates or in nested compositions within After Effects. 
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You'll protect the duration of the episode title’s transition. That way, an editor in 
Premiere Pro will be able to shift the timing of other areas, such as shortening the time 
before the text explodes, but speeding up or slowing down time elsewhere won't affect 
the protected area. 


1 Inthe Timeline panel, drag the Work Area Start marker to 2:00. 
2 Drag the Work Area End marker to 5:00. 


You’ve reduced the work area to the area that you want to protect from 
time-stretching. 


3 Choose Composition > Responsive Design — Time > Create Protected Region 


From Work Area. 


The protected area is shaded in the Timeline panel. 


4 Choose File > Save. 


Exporting the template 


You've added properties to the Essential Graphics panel, renamed them to make 
sense to an editor in Adobe Premiere Pro, and tested their effects. Now you're ready 
to export the template so that your colleagues can use it. You can share it through 

a Creative Cloud library or save it to a local drive as a Motion Graphics template 
(.mogrt) file to distribute yourself. The template includes all the source images, 
videos, and properties. 


> Tip: If you don't 
have the original project 
file available, you can 
open a .mogrt file as 

a project file in After 
Effects. When you select 
the .mogrt file in the 
Open Project dialog 
box, you'll be prompted 
to select a folder for 

the extracted files. 

After Effects extracts 

the components and 
recreates the project file. 
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1 Click Export Motion Graphics Template in the Essential Graphics panel. 


N 


2 Inthe Export As Motion Graphics Template dialog box, make sure Local 
Templates Folder is selected, and click OK. 


Local Templates Folder 


By default, Premiere Pro looks for Motion Graphics templates in the Motion 
Graphics Templates folder on your local computer. However, you can choose 
to save the template to a different folder on your computer or to a Creative 
Cloud library, which you can access from other devices. 


3 Choose File > Save, and then close the project. 
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Extra credit 


Using a Motion Graphics template in Adobe Premiere Pro 


You can use the template to edit the title sequence 
in Premiere Pro. 


1 


Open Premiere Pro. Click New Project in the Home 
window. 


Name the project Shot in the Dark opening, and 
save it in the Lessons/Lesson1 1/Finished_Project 
folder. Click OK. 


Choose Window > Workspaces > Graphics to open 
the Essential Graphics panel and other panels 
you're likely to use with it. 


Choose File > New > Sequence, select the HDV > 
HDV 1080p25 preset, and click OK. 


Make sure Local Templates Folder is selected in 
the Essential Graphics panel, and scroll to the 
template you created. Premiere Pro includes 
several standard templates; they’re listed 
alphabetically. 


Drag your template from the Essential Graphics 
panel onto the new sequence in the Timeline 
panel. If prompted, click Change Sequence 
Settings to match the clip. 


As the template loads, Premiere Pro displays a media 
offline message. 


7 


When the template has loaded, press the spacebar 
to preview the clip, and then go to 5:15 so you can 
see the episode title text and the effect. 


Click the Edit tab in the Essential Graphics panel, 
double-click the Program Monitor panel if you 
don't see the template controls in the Essential 
Graphics panel, and then make changes to the 
settings in the Essential Graphics panel. Press the 
spacebar to see the changes you made. 


Shot in the Dark title sequence 


(continued on next page) 
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Extra credit (continued) 


9 Inthe Timeline panel, drag the layer to extend it, and then preview again. The title animation 
at the beginning is extended, as is the timing of the effect on the image. But the episode title 
animation timing is preserved. 


10 Make any other changes you like, save the file, and close Premiere Pro. 


(i 


PRAN IN THE DARK 


E 4: ANEW DAY DAWNS 
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Review questions 


1 Why would you save a Motion Graphics template from After Effects? 
How do you add controls to the Essential Graphics panel? 


How can you organize controls in the Essential Graphics panel? 


A WwW N 


How can you share a Motion Graphics template? 


Review answers 

1 Saving a Motion Graphics template lets you give your colleagues the ability to edit 
specific attributes of a composition without sacrificing stylistic control. 

2 To adda control to the Essential Graphics panel, drag a property from the Timeline panel. 


3 To organize controls, group them. Choose Add Group from the menu at the bottom 
of the Essential Graphics panel, name the group, and drag controls into it. You can also 
add comments to help users understand your intention. 


4 You can share a Motion Graphics template by exporting it to a shared Creative Cloud 
library, the local templates folder on the same computer, or a .mogrt file that you 
distribute to your colleagues. 
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USING 3D FEATURES 


Lesson overview 

In this lesson, you'll learn how to do the following: 
e Create a 3D environment in After Effects. 

e Look ata 3D scene from multiple views. 

° Create 3D text. 

e Rotate and position layers along x, y, and z axes. 
e Animate a camera layer. 

e Add lights to create shadows and depth. 

e Extrude 3D text in After Effects. 

e Use CINEMA 4D with After Effects. 


This lesson will take about an hour to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 


com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 
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PROJECT: TITLE CARD FOR A PRODUCTION COMPANY 


By clicking a single switch in the Timeline panel 

in After Effects, you can turn a 2D layer into a 3D 
layer, opening up a whole new world of creative 
possibilities. Maxon CINEMA 4D Lite, included with 
After Effects, gives you even greater flexibility. 


Getting started 


Adobe After Effects can work with layers in two dimensions (x, y) or in three 
dimensions (x, y, z). So far in this book, you’ve worked primarily in two dimen- 
sions. When you specify a layer as three-dimensional (3D), After Effects adds the 
z axis, which lets you move the object forward and backward in space. By combin- 
ing this depth with a variety of lights and camera angles, you can create animated 
3D projects that take advantage of the full range of natural motion, lighting and 
shadows, perspective, and focusing effects. In this lesson, you'll explore how to 
create and animate 3D layers as you create a title card for a fictional production 
company. You'll use the CINEMA 4D renderer to extrude text. 


First, you'll preview the final movie and then set up the project. 


1 Make sure the following files are in the Lessons/Lesson12 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: Lunar.mp3, Space_Landscape.jpg 
e Inthe Sample_Movies folder: Lesson12.avi, Lesson12.mov 


2 Open and play the Lesson12.avi sample movie in Windows Movies & TV or the 
Lesson12.mov sample movie in QuickTime Player to see what you will create 
in this lesson. When you are done, close Windows Movies & TV or QuickTime 
Player. You may delete the sample movies from your hard disk if you have 
limited storage space. 


When you begin this lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS). When prompted, click OK to delete your 
preferences. Click New Project in the Home window. 


After Effects opens to display an empty, untitled project. 
4 Choose File > Save As > Save As. 


5 Inthe Save Project As dialog box, navigate to the Lessons/Lesson12/Finished_ 
Project folder. Name the project Lesson12_Finished.aep, and click Save. 


6 Click the New Composition button (Œ) in the Composition panel. 
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7 Inthe Composition Settings dialog box, do the following, and then click OK: 
e Name the composition Lunar Landing Media. 
e Choose HDTV 1080 24 from the Preset menu. 
e Enter 3:00 for the Duration. 


e Make sure the Background Color is black. 


Composition Settings 


Square Pixels 


24 


Full 


8 Choose File > Save. 


Creating 3D text 


In order to move something in 3D space, you need to make it a 3D object. Initially, 

any layer has only x (width) and y (height) dimensions, and can be moved only along 
those axes. But all you have to do to move a layer in three dimensions in After Effects 
is to turn on its 3D layer switch, which lets you manipulate the object along its z axis 

(depth). You'll create text, and then make it 3D. 
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1 Click in the Timeline panel to make it active. 
2 Select the Horizontal Type tool (T) in the Tools panel. 


After Effects adds the Character and Paragraph panels to the stack and opens 
the Character panel. 


@ Note: If Futura PT 3 Inthe Character panel, select the following settings: 
is not available, install 
it using Adobe Fonts. e Font: Futura PT Heavy Oblique 


Choose File > Add Fonts 


Froni Adobe search e Fill Color: White 


for Futura PT, and ¢ Stroke: None 
activate the font. Once 

you've activated the e Font Size: 140 px 
font, it will be available 

in all applications on e Leading: 70 px 


your system, but you 


i . 9 
may need to close the s Tracking: 20% 


Character panel and e Vertical Scale: 65% 
reopen it to see a newly 
activated font. 4 Select All Caps. (You may need to drag the bottom of the Character panel to extend 


it in order to see all settings.) 
5 Open the Paragraph panel, and select the Center Text alignment option. 


6 Click anywhere in the Composition panel and type Lunar. Then press Enter or 
Return and type Landing, and then press Enter or Return again and type Media, 
so that each word is on its own line, as in the image below. 


Character 


Futura PT 


Heavy Oblique 


= 
o 
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7 Select the Selection tool (»). 


8 Inthe Timeline panel, expand the Transform properties for the Lunar Landing 
Media layer, and change the Position property to 960, 470. 


The text is roughly centered in the composition. 


9 Inthe Timeline panel, select the 3D Layer switch (@) for the Lunar Landing 
Media layer to give it three dimensions. 


Lunar Landing Media = 


D- w to 


opeû $+ Source Name Ry KEOSD 
om | i ama as|/ 
> Text Animate: O 
Y Transform 
© Anchor Point 


© Position 


Three 3D Rotation properties appear in the Transform group for the layer, and 
properties that previously supported only two dimensions now display a third value 
for the z axis. In addition, a new property group named Material Options appears. 


When the layer is selected, a color-coded 3D axis appears over the layer’s anchor 
point in the Composition panel. The red arrow controls the x axis, the green arrow 
controls the y axis, and the blue arrow controls the z axis. At the moment, the z axis 
appears at the intersection of the x and y axes; it may be difficult to see against the 
black background. The letter x, y, or z appears when you position the Selection tool 
over the corresponding axis. When you move or rotate the layer while the pointer 
is over a particular axis, the layer’s movement is restricted to that axis. 


10 Hide the properties for the Lunar Landing Media layer. 
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Using 3D views 


Sometimes the appearance of 3D layers can be deceptive. For example, a layer might 
appear to be scaling smaller along its x and y axes when it’s actually moving along 
the z axis. You can’t always tell from the default view in the Composition panel. The 
Select View Layout pop-up menu at the bottom of the Composition panel lets you 
divide the panel into different views of a single frame, so you can see your work from 
multiple angles. You specify different views using the 3D View pop-up menu. 


1 At the bottom of the Composition panel, click the Select View Layout pop- 
up menu, and choose 4 Views, if your screen is large enough to display them. 
Otherwise, choose 2 Views - Horizontal. 


& Composition Lunar 


Active Camera 


Front 


z (Custom_) ~ [=] Æ] ActiveCamera v 


With 4 Views selected, the upper left quadrant displays the scene from the top 
(along the y axis). There, you can see the z axis, and it’s clear that the text layer has 
no depth. The lower left quadrant shows the view from the front. The upper right 
quadrant displays what the camera sees, but because there is no camera in the 
scene, it’s the same as the front view. The lower right quadrant shows the view 
from the right, as if you were observing it along the x axis. 


With 2 Views - Horizontal selected, the left view shows the scene from the top, 
and the right shows the camera’s view (currently the front view). 
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2 Click the Front view to make it active. (Blue corner tabs appear around the active 
view.) Then, from the 3D View pop-up menu, choose Custom View 1 to see the 
scene from a different perspective. (If your Composition window displays only 
two views, click the Top view, and choose Custom View 1 from the 3D View 
pop-up menu.) 


Custom View 1 


| w I (143%) v E 0:00:00:00 + (Custom) ~ [=] ( custom view _} 4views v T R | 
Viewing your 3D scene from different perspectives can help you align elements more 
accurately, view how layers are interacting with each other, and understand how 
objects, lights, and cameras are positioned in 3D space. 


Importing a background 


The text in your title card should appear to be moving in outer space. You'll import 
an image to use as a background. 


1 Double-click an empty area of the 
Project panel to open the Import File Space_Landscapejpgv , used 1 time 
4000 x 3000 (1.00) 


dialog box. 


Millions of Colors 


2 Navigate to the Lesson12/Assets 
folder, and double-click the Space_ 
Landscape.jpg file. o. 


Name = © Type 


IÆ Lunar Landing Media Composition 


P] Space_Landscape.jpg Ml importeJPEG 10MB 


3 Drag the Space_Landscape.jpg item into the Timeline panel, placing it at the bottom 
of the layer stack. 


4 Rename the Space_Landscape.jpg layer Background. 


5 Inthe Timeline panel, select the Background layer, and then click the 3D Layer 
switch (©) to convert it to a 3D layer. 
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@ Note: If you're 6 Make sure the Background layer is selected. Then, in the Right view in the 
displaying only two 
views, select the Active 
Camera view, and 


Composition panel, drag the z-axis arrow (the blue arrow) to the right to move 
the Background layer further behind the text. Watch the views as you drag 


choose Right from the to see how the layer interacts with 3D space. 
3D View pop-up menu. 
Then a a Pa 6. 7 Inthe Timeline panel, press the P key to display the Position property for the 


Background layer. Change the Position to 960, 300, 150. 


Custom View 1 


| (Custom) ~ [=] Æ CustomView1 v 4 Views 


Layer Name 
T Lunar Landing Media 
aago o e 


© Position 


8 Press P to hide the Position property, and then choose File > Save to save your 
work so far. 


Adding 3D lights 


You've created a 3D scene, but it doesn’t yet look three-dimensional from the front. 
Adding light to a composition creates shadows that give depth to the scene. You'll 
create two new lights for your composition. 


Creating a light layer 


In After Effects, a light is a type of layer that shines light on other layers. You can 
choose from among four different types of lights—Parallel, Spot, Point, and 
Ambient—and modify them with various settings. Lights, by default, are 
directed toward a point of interest, which is the focus area of the scene. 
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1 Deselect all layers, so that the new layer you create will appear at the top 
of the layer stack. 


2 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


3 Choose Layer > New > Light. 
4 Inthe Light Settings dialog box, do the following: 
e Name the layer Key Light. 
e Choose Spot from the Light Type menu. 
e Set Color to a light orange (R=255, G=235, B=195). 
e Make sure Intensity is set to 100% and Cone Angle to 90 degrees. 
e Make sure Cone Feather is set to 50%. 
e Select the Casts Shadows option. 
e Set Shadow Darkness to 50% and Shadow Diffusion to 150 pixels. 
e Click OK to create the light layer. 


Active Camera 


In the Timeline panel, the light layer is represented by a light bulb icon (®). 
In the Composition panel, a wireframe illustrates the light’s position, with 
a cross-hairs icon (®) representing the point of interest. 
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Positioning the spotlight 


The point of interest for this light is currently the center of the scene. Because that’s 
where the text layer is located, you don’t need to adjust it. However, you'll change 
the light position so the scene looks less bleak. 


1 Select the Key Light layer in the Timeline panel, and press the P key to reveal 
the Position property for the light layer. 


2 Inthe Timeline panel, type 955, -102, -2000 in the Position property. The light 
is now in front of and above the object, aiming down. 


Lunar Landing Media = 


© Position 
T Lunar Landing Media 
BB Background 


Creating and positioning the fill light 


The key light gives the scene a moody look, but it’s still very dark. You'll add a fill light 
to lighten the darker areas. 


1 Choose Layer > New > Light. 


2 Inthe Light Settings dialog box, do the 
following: 


e Name the layer Fill Light. 
e Choose Spot from the Light Type menu. 


e Set the Color to a light blue (R=205, 
G=238, B=251). 


e Set Intensity to 50% and Cone Angle 
to 90 degrees. 


e Make sure Cone Feather is set to 50%. 
e Deselect Casts Shadows. 


e Click OK to create the light layer. 
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3 Inthe Timeline panel, select the Fill Light layer, and press the P key to reveal 
its Position property. 


4 Change the position to 2624, 370, -1125. 


Lunar Landing Media = 


Layer Name 


© [Fill Light EA 


5 Position 
® Key Light 

5) Position 
T Lunar Landing Media 
BB Background 


The text stroke, stars, and moon highlight are all much brighter now. 


5 Hide the open properties for all layers, and choose File > Save. 


Casting shadows and setting material properties 


The scene is looking better, with a mix of warm and cool colors. However, it still 
doesn’t look three-dimensional. You'll change the Material Options properties 
to determine how the 3D layers interact with the lights and shadows. 


1 Select the Lunar Landing Media layer in the Timeline panel, and press the A key 
twice (AA) to reveal the Material Options properties for the layer. 


The Material Options property group defines the surface properties of the 3D layer. 
You can also set shadow and light transmission values. 


2 For Casts Shadows, click the word Offto toggle the setting on. (Make sure it says 
On, not Only.) 


The text layer now casts shadows based on the lights in the scene. 


3 Change the Diffuse value to 60% and the Specular Intensity to 60% so that 
the text layer reflects more of the light in the scene. 
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4 Increase the Specular Shininess to 15% to give the surface a more metallic shine. 


Lunar Landing Media = 


+ Layer Name 
1 @ Fill Light y 
M2 ® KeyLight p 
JET 2 
v Material Options 
Casts Shadows 
© Light Transmission 
Accepts Shadows 
Accepts Lights 
© Ambient 
© Diffuse 
© Specular Intensity 
©) Specular Shininess 
© Metal 


5 Hide the properties for the Lunar Landing Media layer. 


Adding a camera 


You've already seen that you can view a 3D scene from different perspectives. You 
can also view 3D layers from various angles and distances using layers called cam- 
eras. When you set a camera view for your composition, you look at the layers as 
though you were looking through that camera. You can view a composition through 
the active camera or through a named, custom camera. If you have not created a 
custom camera, then the active camera is the same as the default composition view. 


So far, you have been viewing this composition primarily from the Top, Right, 
and Custom View 1 angles. Currently, the Active Camera view doesn’t let you see 
your composition from any specific angle. To see everything you want to see, you'll 
create a custom camera. 


1 Deselect all layers, and then choose Layer > New > Camera. 


2 Inthe Camera Settings dialog box, choose 20mm from the Preset menu, 
and click OK. 
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Camera Settings 


Two-Node Camera 


millimeters 


Hortzontally 


The Camera 1 layer appears at the top of the layer stack in the Timeline panel 


(with a camera icon next to the layer name), and the Composition panel updates to 
reflect the new camera layer’s perspective. The view should change slightly, because 
the 20mm preset shows a wider field of view than the default. If you didn’t notice the 
scene change, toggle the visibility of the Camera 1 layer to see it, and then make sure 


it’s visible. 


3 


Choose 2 Views - Horizontal from the Select View Layout pop-up menu at 
the bottom of the Composition panel. Change the view on the left to Right, 
and make sure the view on the right is set to Active Camera. 


ition Lunar Landing Media = 


Lunar Landing Media 


f Right ` Active Camera 


4 
- 43 fI 0:00:00.00 A $ (Custom) v~ =] Æ Right 


Tip: After Effects 
displays the wireframes 
for cameras by default. 
To see wireframes 

only when cameras 

(or spotlights) are 
selected, or not at all, 
choose View Options 
from the Composition 
panel menu, and then 
choose the options 
you want from the 
Camera Wireframes and 
Spotlight Wireframes 
menus. Then click OK. 
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Like light layers, camera layers have a point of interest that can be used to determine 
what the camera looks at. By default, the camera’s point of interest is the center 
of the composition. That’s where your text currently is, so that point of interest 
works well. 


4 Make sure the current-time indicator is at the beginning of the time ruler. 
Select the Camera 1 layer, and press the P key to reveal the Position property 
for the layer. Create an initial keyframe by clicking the stopwatch icon (ð) next 
to the Position property. 


5 Set the z-axis value to -1000. 


Lunar Landing Media = 


Layer Name 


mmea e 


2 Position 
@ Fill Light 
@ Key Light 
T Lunar Landing Media 
BB Background 


The camera moves slightly closer to the text. 
6 Goto 1:00. 
7 Change the z-axis value to -590. 


Lunar Landing Media = 


| 
[ox © D+ LayerName Pe KAO 


o "m: spm) 


k- Position 

@ Fill Light 

@ Key Light 

T Lunar Landing Media 
BB Background 


The camera moves much closer to the text. 


8 Right-click or Control-click the second Position keyframe, and choose Keyframe 
Assistant > Easy Ease In. 
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9 Move the current-time indicator through the timeline to 1:00. As the camera moves 
through the scene, notice how the light reflects off the text layer and how the 
overall image is influenced by the wider camera lens. 


10 Hide the Position property for the Camera 1 layer, and choose File > Save. 


Extruding text in After Effects 


Using the CINEMA 4D renderer, you can extrude text and shapes within After Effects. 
You'll use the Geometry Options properties to make the text a little more interesting. 


1 Expand the Lunar Landing Media layer in the Timeline panel. 


2 Next to Geometry Options (currently dimmed), click Change Renderer. 


Lunar Landing Media = 


+ Layer Name 
1 @ Camera 1 
Į 2 @ Fill Light 
3 @ Key Light 
4 


1 Lunar Landing Media E2074 © 
> Text Animate: O 
Transform 


The Composition Settings dialog box opens, with the 3D Renderer tab active. 


3 Choose CINEMA 4D from the Renderer pop-up menu, and click Options. 


Composition Settings 


nar Landing Media 


3D Renderer 


| GNEMA 4D 
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P Tip: To quickly open 
the options dialog box, 
click the wrench icon 
next to the renderer 
name at the top of the 
Composition panel. 


4 Move the Quality slider to 32. 


CINEMA 4D Renderer Options 


N 


5 Click OK to close the CINEMA 4D Renderer Options dialog box, and then click 
OK again to close the Composition Settings dialog box. 


The CINEMA 4D renderer options include a single Quality value, which determines 
how the CINEMA 4D renderer draws 3D layers. A lower value results in faster ren- 
dering but lower rendering quality. Choose a Quality setting that balances rendering 
speed with the 3D rendering quality your project requires. 


6 Expand Geometry Options for the Lunar Landing Media layer. 

7 Choose Concave from the Bevel Style menu. 

8 Change the Extrusion Depth to 50. 
Text 


Transform 
Geometry Options 


Bevel Style Concave 
© Bevel Depth 

7) Hole Bevel Depth 100.0% 
>) ‘Extrusion Depth 


It’s not obvious that you've extruded the text. You'll adjust the text’s angle to show 
off the effect and to provide additional interest to the scene. 


9 Select the Lunar Landing Media layer, and press R to reveal the Rotation 
properties. 
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10 Change the Y Rotation to 17. 


Lunar Landing Media = 


Layer Name 
E4 Camera 1 
@ Fill Light 
@ Key Light Et 
48) Lunar Landing Media E3 
5 Orientation y 
© X Rotation 
©) Y Rotation 
5 Z Rotation 


3D channel effects 


Several 3D channel effects (3D Channel Extract, Depth Matte, Depth of Field, and 
Fog 3D) can extract the image depth data (called z-depth) from a nested 3D com- 
position to apply special effects. First, precompose 3D layers if they're not already 
nested. Then apply the effect to the nested composition, and make adjustments in 
the Effect Controls panel. You can learn more about depth passes and 3D channel 
effects in After Effects Help. 


Animating 3D text 


You’ve animated the camera; now you'll create and animate a subtitle. You'll use 
the same process you used before to create additional 3D text. 


1 Choose Layer > New > Text. Move the new layer directly above the Lunar 
Landing Media layer in the Timeline panel, if it isn’t already there. 


2 Inthe Character panel, choose Chaparral Pro Regular for the font, and 70 px 
for the text size. Deselect the All Caps option. Leave the other properties as you 
set them for the first text layer. 
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Click in the Composition panel and type A Space Pod LLC. 
Select the Selection tool (>), and then drag the subtitle below the other text. 
Select the 3D Layer option for the A Space Pod LLC layer. 


Character 


Chaparral Pro 


Regular 


px 


Layer Name 
E< Camera 1 
® Fill Light 
® Key Light 
Ea 


Expand Geometry Options, choose Concave from the Bevel menu, and change 
the Extrusion Depth to 20. 


E Lunar Landing Media = 


Layer Name 

E< Camera 1 
® Fill Light 
@ Key Light 


T [A Space Pod LLC E 
Text 
Transform 


Geometry Options 
Bevel Style Concave 
© Bevel Depth 


© Hole Bevel Depth % 
© Extrusion Depth 2 
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7 Collapse Geometry options, and then expand Material Options. 
8 For Casts Shadows, click the word Offto toggle the setting on. 


9 Change the Diffuse value to 60%, the Specular Intensity to 60%, and the Specular 
Shininess to 15% so the text layers’ reflections match each other. 


Lunar Landing Media = 


Layer Name 
w= Camera 1 


? 
1 
2 = ®@ Fill Light 
3 @ Key Light ry 
4 T [Space Pod ttc] = 


Text 

Transform 

Geometry Options 

Material Options 
Casts Shadows 
Accepts Shadows 
Accepts Lights 
Appears in Reflections ’ 
5 Ambient 0 A. Space Pod LLC 
D Diffuse 609 
J Specular intensity 


©) Specular Shininess 


10 Select the A Space Pod LLC layer, and press R to reveal the Rotation properties. 


11 Change the Y Rotation to 17. Use the Selection tool to reposition the subtitle so that 
it is centered under the title, if necessary. 


Lunar Landing Media = 


Layer Name * AEO O 


E Camera 1 


® Key Light È 
T [A Space Pod LLC 


5 Orientation 


pS 
F 
® Fill Light c3 
p 
Pp 


4 


5) X Rotation 
D ¥ Rotation 
5 Z Rotation 


12 Move the current-time indicator to 0:10. 


13 In the Effect and Controls panel, search for Fly In With a Twist, and then drag that 
effect onto the A Space Pod LLC text. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 309 


14 In the Timeline panel, expand the Text > Animator 1> Range Selector 1 properties 
for the A Space Pod LLC layer. Then move the second keyframe to the 2:00 point 
in the timeline so that the text will appear more quickly. 


At the beginning of the effect, the text is visible at the bottom of the screen. You'll 
adjust the opacity so that the text isn’t visible until the camera has moved in. 


15 Go to 0:10 in the timeline. Press T to reveal the layer’s Opacity property, and then 
click the stopwatch icon (6) to set a keyframe at 100%. 


16 Go to 0:09, and change the Opacity to 0%. 


17 Press the spacebar to preview the animation. Press the spacebar again to stop 
playback. 


18 Choose File > Save to save your work. 


Finishing the project 
As a final touch, you'll add an audio file for the title card. 


1 Select the Project tab, double-click an empty area of the Project panel, and then 
navigate to the Lesson12/Assets folder. Double-click the Lunar.mp3 file to 
import it. 

2 Drag the Lunar.mp3 file from the Project panel to the bottom of the layer stack 
in the Timeline panel. 


Lunar Landing Media 


Layer Name E Ske & Parent & Link 
Camera 1 Co None 
Fill Light + None 
Key Light + None 
A Space Pod LLC > D None 
Lunar landing media © None 
Background cA D » None 


$ 
B 1 
2 
3 
4 
5 
6 
7 


C 
e 
° 
= 
B 
B 
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3 Choose File > Save, and then preview your movie. 
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Working with CINEMA 4D Lite 


After Effects installs a version of Maxon CINEMA 4D that lets motion graphics artists and animators insert 
3D objects directly into an After Effects scene without pre-rendering passes and potentially complicated 
file exchanges. You can continue to edit 3D objects in CINEMA 4D Lite after you've added them to your 
After Effects composition. 


To use CINEMA 4D Lite, you must register with Maxon. You can use the CINEMA 4D renderer in After Effects 
without registering. 


© Note: In After Effects, the upper left corner of the composition is considered 0, 0. In many 3D applications, 
including Maxon CINEMA 4D, the center of the world (often the screen) is the origin, or 0, 0, O point. 
Additionally, the Y distance increases as the cursor moves down the screen in After Effects. 


You can add a CINEMA 4D layer to a composition in After Effects. When you add the layer, After Effects 
opens CINEMA 4D Lite so you can create your 3D scene in a new C4D file. Save the file in CINEMA 4D, and 
it will update automatically in After Effects. You can return to CINEMA 4D to edit the layer. 


To add a layer, choose Layer > New > Maxon CINEMA 4D File. After Effects opens the Cineware effect in 
the Effect Controls panel and CINEMA 4D opens with an empty scene, displaying only the 3D grid. 


While you're working with a CINEMA 4D file in After Effects, you should usually choose Software 
or Standard (Draft) from the Renderer menu in the Cineware effect. However, when you prepare 
to render your final project, choose Standard (Final) from the Renderer menu. 


To learn more about using CINEMA 4D Lite, see CINEMA 4D Help. 
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Review questions 


—_ 


What happens to a layer when you select its 3D Layer switch? 
Why is it important to look at multiple views of a composition that contains 3D layers? 
What is a camera layer? 


What is a 3D light in After Effects? 


Review answers 


When you select a layer’s 3D Layer switch in the Timeline panel, After Effects adds 

a third axis, the z axis, to the layer. You can then move and rotate the layer in three 
dimensions. In addition, the layer takes on new properties that are unique to 3D layers, 
such as the Materials Options property group. 


The appearance of 3D layers can be deceptive, depending on the view in the Composition 
panel. By enabling 3D views, you can see the true position of a layer relative to other 
layers in the composition. 


You can view After Effects 3D layers from any number of angles and distances using 
layers called cameras. When you set a camera view for your composition, you look at 

the layers as though you were looking through that camera. You can choose between 
viewing a composition through the active camera or through a named, custom camera. 
If you have not created a custom camera, then the active camera is the same as the 
default composition view. 


In After Effects, a light is a type of layer that shines light on other layers. You can choose 
from among four different types of lights—Parallel, Spot, Point, and Ambient—and 
modify them with various settings. 
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WORKING WITH THE 
3D CAMERA TRACKER 


Lesson overview 

In this lesson, you'll learn how to do the following: 

e Track footage using the 3D Camera Tracker. 

e Add camera and text elements to a tracked scene. 
e Seta ground plane and origin. 

e Create realistic shadows for new 3D elements. 

e Lock elements to planes using solid objects. 


e Remove rolling shutter distortions from DSLR footage. 


This lesson will take about an hour and a half to complete. If you 


haven't already done so, download the project files for this lesson 

from www.adobepress.com/AfterEffectsCIB2020, following the instruc- 
tions in the Getting Started section under “Accessing the lesson files and 
Web Edition” 
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PROJECT: TV AD 


The 3D Camera Tracker effect analyzes two- 
dimensional footage to create a virtual 3D camera 
that matches the original. You can use this data 

to add 3D objects that merge realistically with 
your scene. 


About the 3D Camera Tracker effect 


The 3D Camera Tracker effect automatically analyzes the motion present in existing 
2D footage, extracts the position and lens type of the real camera that shot the scene, 
and creates a new 3D camera in After Effects to match it. The effect also overlays 
3D track points onto the 2D footage, so you can easily attach new 3D layers onto 
the original footage. 


These new 3D layers have the same movement and perspective changes as the origi- 
nal footage. The 3D Camera Tracker effect even helps create “shadow catchers,’ so 
your new 3D layers can appear to cast realistic shadows and reflections onto the 
existing footage. 


The 3D Camera Tracker performs its analysis in the background. Therefore, you 
can work on other compositions while the footage is being analyzed. 


Getting started 


In this lesson, you'll create a short ad for a tourism company. You'll begin by import- 
ing the footage and tracking it with the 3D Camera Tracker effect. Then you'll add 
3D text elements that track precisely with the scene. You'll add images using similar 
techniques. Finally, you'll use an effect to quickly add more character to the scene. 


First, you'll preview the final movie and set up your project. 


1 Make sure the following files are in the Lessons/Lesson13 folder on your hard 
disk, or download them from www.adobepress.com now: 


e Inthe Assets folder: BlueCrabLogo.psd, Quotel.psd, Quote2.psd, Quote3. 
psd, Shoreline.mov 


e Inthe Sample_Movies folder: Lesson13.avi, Lesson13.mov 


2 Open and play the Lesson13.avi sample movie in Windows Movies & TV or 
the Lesson13.mov sample movie in QuickTime Player to see what you will 
create in this lesson. When you are done, close Windows Movies & TV or 
QuickTime Player. You may delete the sample movies from your hard disk if you 
have limited storage space. 


When you begin this lesson, restore the default application settings for After Effects. 
See “Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 
or Command+Option+Shift (macOS). When prompted, click OK to delete your 
preferences. Click New Project in the Home window. 


316 LESSON 13 Working with the 3D Camera Tracker 


After Effects opens to display an empty, untitled project. 
4 Choose File > Save As > Save As. 


5 In the Save As dialog box, navigate to the Lessons/Lesson13/ 
Finished_Project folder. 


6 Name the project Lesson13_Finished.aep, and then click Save. 


Importing the footage 
You'll import five assets for this lesson. 
1 Choose File > Import > File. 


2 Navigate to the Lessons/Lesson13/Assets folder. Shift-click to select the 
Quotel.psd, Quote2.psd, Quote3.psd, and Shoreline.mov files, and then click 
Import or Open. 


3 Double-click an empty area in the Project panel to open the Import File dialog 
box again. 


4 Select the BlueCrabLogo.psd file, and click Import or Open. 
5 Inthe BlueCrabLogo.psd dialog box, select Merged Layers, and then click OK. 


Creating the composition 


Now, you will create a new composition based on the aspect ratio and duration 
of the Shoreline.mov file. 


1 Drag the Shoreline.mov item onto the Create A New Composition button (Œ) 
at the bottom of the Project panel. After Effects creates a new composition 


named Shoreline and displays it in the Composition and Timeline panels. 


2 Drag the current-time indicator across the time ruler to preview the shot. 


The camera moves around a beach scene, with a close-up of some scurrying crabs 
before it zooms back out to a shot of the ocean and rocks. You'll add text, quotes 
for the crabs, and the company logo. 


3 Choose File > Save to save the file. 
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Repairing rolling a 


shutter distortions x 


Digital cameras with CMOS sensors—including video-capable DSLRs, popular for 
the creation of films, commercials, and television shows—typically have what is 
commonly known as a “rolling” shutter, which captures a frame of video one scan 
line at a time. Due to time lag between scan lines, not all parts of the image are 
recorded at exactly the same time, causing motion to ripple down the frame. If the 
camera or the subject is moving, the rolling shutter can cause distortions, such as 
leaning buildings and other skewed images. 

The Rolling Shutter Repair effect attempts to correct this problem automatically. To 
use it, select the problem layer in the Timeline panel, and choose Effect > Distort > 
Rolling Shutter Repair. 


Due to a rolling shutter distortion, After applying the effect, the building 
the pillars of the building appear looks much more stable. 
to be leaning. 


The default settings usually do the trick, but you may need to change the Scan 
Direction or the Method being used to analyze the footage. 

If you plan to use the 3D Camera Tracker effect with footage on which you've used 
the Rolling Shutter Repair effect, precompose the footage first. 


Tracking the footage 


The 2D footage is in place. Now you'll have After Effects track it and interpolate 
where a 3D camera should be placed. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 
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2 Right-click (Windows) or Control-click (macOS) the Shoreline.mov layer 
in the Timeline panel, and choose Track & Stabilize > Track Camera. 


Layer Styles > 


Effect > 
Keyframe Assistant > 


Open > Warp Stabilizer VFX 
Reveal > Track Motion 
Create > Track Mask 

Camera > 


After Effects opens the Effect Controls panel and displays its progress as it ana- 
lyzes the footage in the background. When the analysis is complete, many tracking 
points appear in the Composition panel. The size of a tracked point indicates its 
proximity to the virtual camera: Larger points are closer, and smaller points are 


further away. 


3 When the analysis is complete, choose File > Save to save your work so far. 


Creating a ground plane, a 

camera, and the initial text 

You have a 3D scene, but it needs a 3D camera. You'll add a camera when you create 
the first text element. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


Depending 

on your system, 
this may take 

a while. 


P Tip: The default 
analysis is usually 
sufficient, but you 

can perform a more 
detailed analysis to 
better solve the camera 
position. The Detailed 
Analysis option is in the 
Advanced area of the 
Effect Controls panel. 


@ Note: You can 
also add a camera 
by clicking the Create 
Camera button in the 
Effect Controls panel. 
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2 Inthe Composition panel, hover the cursor over the water next to the large 
rocks until you see the displayed target similar to the one in the image below. 
(If you don’t see the track points and target, click the 3D Camera Tracker effect 
in the Effect Controls panel to make it active.) 


When you hover the cursor between three or more neighboring track points 
that can define a plane, a semitransparent triangle appears between the points. 
Additionally, a red target shows the orientation of the plane in 3D space. 


3 Right-click (Windows) or Control-click (macOS) the plane, and choose 
Set Ground Plane And Origin. 


Create Text and Camera 

Create Solid and Camera 

Create Null and Camera 

Create Shadow Catcher, Camera and Light 


Create 3 Text Layers and Camera 


Create 3 S anc 


Create 3 Nulls and Camera 


Delete Selected Points 


The ground plane and origin provide a reference point, setting a point where the 
coordinates are (0, 0, 0). Though nothing appears to change in the Composition 
panel using the Active Camera View, the ground plane and origin make it easier 
to change the camera’s rotation and position. 


4 Right-click (Windows) or Control-click (macOS) the same plane, and choose 
Create Text And Camera. 


i Create Solid and Camera N 
Create Null and Camera 
Create Shadow Catcher, Camera and Light 


Create 3 Text Layers and Camera 
After Effects displays a large text item lying flat in the Composition panel. It also 
adds two layers to the Timeline panel: Text and 3D Tracker Camera. The 3D switch 
is enabled for the Text layer, but the Shoreline.mov layer remains 2D. Because the 
text elements are the only ones that need to be positioned in 3D space, there is 
no reason to make the background footage layer a 3D layer. 
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5 Move the current-time indicator along the time ruler. The text remains in position, 
tracking with the camera. Return the current-time indicator to the beginning 
of the time ruler. 


6 Double-click the Text layer in the Timeline panel to open the Character panel 


in the stacked panels on the right. 


$ 


P Source Name 
ee text 
2 @ 3D Tracker Camera 
3 B Shoreline.mov 


» p p 


7 Inthe Character panel, change the font to Impact Regular. Then change the font 
size to 48 px, the stroke width to .5 px, and the stroke type to Stroke Over Fill. 
Make sure the fill color is white and the stroke color is black (the default colors), 
and that Tracking is set to 0. 


The text looks great, but you want it to stand on end. You'll change its location @ Note: If you selected 

in space, and then replace it with the advertisement text. a different target for 
your ground plane, 

8 Select the Text layer in the Timeline panel to exit text-editing mode. Then, you may need to use 


different values. Instead 
: f of entering values, you 
Orientation values to 12, 30, 350 degrees. could use the Rotation 
tool to adjust the 
individual axes in the 
Composition panel. 


press the R key to display the Rotation property of the layer, and change the 


urce Name 


I ® 
D Orientation 
tion 


Any new 3D layer you create uses the ground plane and origin to orient the layer 
in the scene. When you change the Orientation values, the text changes its orienta- 
tion in space. 


9 Double-click the Text layer in the Timeline panel to make it active in the 
Composition panel. 
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When the text is editable, it appears to have a light red mask surrounding it. 


10 With the text selected in the Composition panel, type THE OTHER GUYS to 
replace it. Then select the THE OTHER GUYS layer to exit text-editing mode. 


Re 


US THE OTHER GUYS $i 


D) Orien 


So far, so good. But you want the text to be centered in the scene. You'll reposition 
the text. 


11 Press P to display the Position property for the text layer. Using the Selection 
tool, drag the text up the screen, so that it is over the water. Or you can type 
—6270, —1740, 1188 for the Position property. 


F 
D Position 

@ 3D Tracker Camera 

B Shoreline.mov 


If the text stays in the same position, it won't be visible as the camera moves away. 
You'll animate it to remain visible a bit longer. 


12 Click the stopwatch icon (6) to create an initial keyframe for the Position 
property. 

13 Go to 2:03. Change the Position property to —7115, 1800, —1150, or use the 
Selection and Rotation tools to position it as it appears in the image below. 


l i 
Position 

@ 3D Tracker Camera 

B Shoreline.mov 


14 Manually scroll through the timeline to preview the text. Then close any open 
properties, and choose File > Save to save your work so far. 
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Creating additional text elements 


You created the initial text for the advertisement. Now you need to perform the 
same tasks to create the rest of the ad. You'll use the same steps to create each label, 
but because the text appears in different places in the video and needs to shift in 
relationship to the scene, you'll need to use different position, orientation, and 
scaling values. 


1 Go to 2:03. 
2 Inthe Timeline panel, select the Shoreline.mov layer, and press E to reveal @ Note: Make sure you 
its effects. Then select the 3D Camera Tracker to make it active. select the 3D Camera 


Tracker effect in the 
Shoreline.mov layer, 
not the 3D Tracker 
Camera layer. 


open ; Source Narr 


T THE OTHER GUYS 
@ 3D Tracker Camera 


B [Shoreline.mov + 


3 In the Effect Controls panel, change the Track Point Size value to 50% so you 
can see the track points more clearly. 


4 Make sure the Selection tool is selected. Then, in the Composition panel, hover 
over an area so that the red target lies flat across the rocks, right-click or 
Control-click the target, and choose Create Text. 


x 3D Camera Tracker 


Create Solid N 
Create Null 
Create Shadow Catcher and Light 


Create 3 Text Layers 
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5 Select the Text layer in the Timeline panel, and press the R key to reveal 
the Rotation values. Then change the Orientation values to 0, 45, 0. 


Source Name 


S e E 


Orientation 


6 Double-click the Text layer to make it editable, and then type ARE in the 
Composition panel. Click the ARE layer to exit text-editing mode. 


7 Press Shift+ P to display the Position property. Then click the stopwatch icon (©) 
to create an initial keyframe. 


8 Go to 2:29, and use the Selection tool to move the text so that its position is 
similar to the text in the image below. 


9 Go to 4:14. Use the Hand tool (W) to move the composition so that you can see 
the text box outside the frame, and then use the Selection tool to drag it so that 
the bottom of the text is visible, as shown in the image below. Or, you can adjust 
the Position values. 


10 Hide the properties for the layer. If you used the Hand tool to reposition the 
image, move it back now. Then select the Selection tool, and manually preview 
the text animation. 
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11 Go to 4:14, and activate the 3D Camera Tracker track points again by selecting the 
Shoreline.mov layer in the Timeline panel, and then either selecting 3D Camera 
Tracker under the Shoreline.mov layer or selecting 3D Camera Tracker in the 
Effect Controls panel. 


12 With the Selection tool (>), select a target for a flat plane against the large rock 
on the right. Then right-click the target, and choose Create Text. 


Create Solid N 
Create Null 
Create Shadow Catcher and Light 


Create 3 Text Layers 


13 Select the Text layer in the Timeline panel, and press R, and then Shift+P+S to 
see the Rotation, Position, and Scale properties. Then change the Orientation 
values to 0, 45, 10, and the Scale property to 2000%. 


14 Double-click the Text layer, and then type SCRAMBLING in the Composition 
panel. 


15 Go to 3:10, where this text should first be visible. Use the Selection tool to drag 
the text so that it starts below “ARE” and continues offscreen. You can also use 
the Rotation tool. When you're satisfied with its position, click the stopwatch 


icon to create an initial keyframe for the Position property. 


16 Go to 4:21, and use the Selection tool to move the text as it appears in the image 
below. Then do the same at 6:05 and 7:04, so that the text continues to move 
down and toward the left. 
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The text is in position, but you want it to appear suddenly on the screen. You'll trim 
the layers to stagger their appearance. 


17 Go to 2:03, select the ARE layer, and then press Alt+[ (Windows) or Option+[ 
(macOS). Then go to 3:10, select the SCRAMBLING layer, and press Alt+[ 
or Option+[ again. 


18 Hide the properties for all layers, and then choose File > Save to save your work. 


19 Press the spacebar to preview the text animation. Press the spacebar again 


to stop playback. 


Locking an image to a plane with a solid layer 


You created the advertising copy in After Effects, but the crabs’ expressions are in 
quotation bubbles, which are easier to include as images. You'll attach the PSD files 
to solid layers in After Effects to lock them to specific planes. 


1 Go to 6:06, select the Shoreline.mov layer in the Timeline panel, and select 
the 3D Camera Tracker effect in the Effect Controls panel. 


2 With the Selection tool, move the cursor so that the target is on a vertical plane 
as in the image below. Right-click the target, and choose Create Solid. 


Create Text 
Create Null N 
Create Shadow Catcher and Light 


Create 3 Text Layers 


After Effects creates a Track Solid 1 layer, and a colorful solid square appears 
in the Composition panel. 
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Adjusting the camera’s depth of field 


You can make the computer-generated elements more closely match the source 
footage if you adjust the depth of field for the 3D camera. If you use the values that 
were used in the camera that shot the original footage, 3D objects that are further 
away from the camera appear to be more out of focus. 

To adjust the depth of field, select the 3D Camera Tracker layer in the Timeline panel, 
and then choose Layer > Camera Settings. 


3 Right-click or Control-click the Track Solid 1 layer in the Timeline panel, 
and choose Pre-compose. Then, in the Pre-compose dialog box, name the 
layer Crab Quote 1, and click OK. 


Pre-compose x 


Shoreline 


ome $- Source Name 


j 
F SCRAMBLING P 
T ARE 
T THE OTHER GUYS 

@ 3D Tracker Camera 


1 

; 
= a 

N s: 
After Effects creates the Crab Quote 1 composition, which contains the Track 
Solid 1 layer. 


4 Double-click the Crab Quote 1 composition to open it. In the Timeline panel, 
delete the Track Solid 1 layer. 


5 Drag the Quotel.psd file from the Project panel into the Timeline panel. 


6 Choose Layer > Transform > Fit to Comp Width. 
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7 Select the Shoreline Timeline panel. 


T SCRAMBLING F 
T ARE 
T THE OTHER GUYS 


After Effects displays the Quotel.psd image where you created a solid layer. 


8 Use the Selection and Rotation tools to position and scale the quote so that 
it appears to relate to a cluster of crabs. 


9 Go to 7:15, select the Shoreline.mov layer in the Timeline panel, and select the 
3D Camera Tracker effect again. In the Effect Controls panel, reduce the Track 
Point Size to 25% so you can see the track points more clearly. Then, find a 
vertical plane against a rock, right-click the target, and choose Create Solid. 


10 Right-click or Control-click the Track Solid 1 layer, and choose Pre-compose. 
In the Pre-compose dialog box, name the composition Crab Quote 2, and then 
click OK. 


11 Double-click the Crab Quote 2 composition to open it. Delete the Track Solid 
1 layer, drag the Quote2.psd file to the Timeline panel, and choose Layer > 
Transform > Fit To Comp. 


12 Return to the Shoreline Timeline panel, and then adjust the position, rotation, 
and scale of the quote to match the crabs’ position. Click the chain icon to select 
different Scale values. 


Create Text 


Create Null N 


Create Shadow Catcher and Light 


Create 3 Text Layers 


Create 3 Solids 


13 Go to 9:01, select the Shoreline.mov layer, and select the 3D Camera Tracker 
effect again. In the Effect Controls panel, reduce the Target Size to 50%. Right- 
click a target, as shown on the next page, and choose Create Solid. 
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14 Right-click or Control-click the Track Solid 1 layer, choose Pre-compose, name the 
composition Crab Quote 3, and click OK. Then, double-click the Crab Quote 3 
composition to open it, delete the Track Solid 1 layer, drag the Quote3.psd file 
into the Timeline panel, and choose Layer > Transform > Fit 
To Comp. 


15 Select the Shoreline Timeline panel, and then adjust the position, rotation, 
and scale of the quote to match the position of the crabs. 


Create Text 


Create Null N 
Create Shadow Catcher and Light 


16 Choose File > Save to save your work so far. 


Tidying the composition 
You’ve done some complex work to create a scene that merges the added components 
with an existing tableau. You'll preview it to see it in action. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Press the spacebar to preview the movie. Let it play through completely once 
to cache the video and audio; once it’s cached, it should play in real time. 


3 Press the spacebar again to stop playback. 


It’s looking pretty good, but the word ARE may show up unexpectedly toward the 
end, and the crab quotes all appear at once. You'll adjust layers to ensure they appear 
when you want them to. 


4 Go to 5:00, select the ARE layer, and press Alt+] or Option+]. 

5 Go to 6:06, select the Crab Quote 1 layer, and press Alt+[ or Option+[. 
6 Goto 7:15, select the Crab Quote 2 layer, and press Alt+[ or Option+[. 
7 Go to 9:01, select the Crab Quote 3 layer, and press Alt+[ or Option+|[. 


SCRAMBLING 
ARE 
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8 Press the spacebar to preview the movie again. Now the text and quotes appear 
when you expect them to. 


9 Press the spacebar again to stop playback. 


10 Choose File > Save to save your work so far. 


Adding a final object 


Without the company logo, no one will know who has the competition scrambling. 
You'll add the logo to the end of the movie using another solid layer. 


1 Goto 11:15, select the Shoreline.mov layer, and select the 3D Camera Tracker 
effect in the Effect Controls panel again. Change the Track Point Size and Target 
Size back to 100%. 


2 Find a plane that is relatively flat on a rock, right-click the target, and choose 
Create Solid. 


Create Text 


Create Null N 


Create Shadow Catcher and Light 


3 


Right-click or Control-click the Track Solid 1 layer, choose Pre-compose, name 
the composition Logo, and click OK. 


4 Double-click the Logo composition to open it. Delete the Track Solid 1 layer, 
and then drag the BlueCrabLogo.psd file into the Timeline panel. With the 
BlueCrabLogo.psd layer selected, choose Layer > Transform > Fit To Comp. 


wu 


Select the Shoreline Timeline panel, and then select the Logo layer. 


fon) 


Press R to reveal the Rotation property, and then change the Orientation to 0, 60, 0. 
Use the Selection tool (>) to drag the logo up to rest on the rock. 


Orientation 
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7 Press Shift+P+S to reveal the Position and Scale properties, too. Click the 
stopwatch icons (®) to create initial keyframes for the Position, Scale, and 
Orientation properties. 


8 Go to 12:03, and increase the Scale value (we used 190.5%). Adjust the position 
and orientation as needed to match the image below. 


9 Go to 13:04, and increase the Scale value again (we used 249%). Adjust the 
position if necessary to match the image below. 


10 Go to 13:25, and increase the Scale value again (we used 285.2%). Adjust the 
orientation so that the logo faces forward; adjust the position to match the image 


below. 


12:03 13:04 13:25 


11 Go to 14:29, and adjust the position for the final shot. Hide all layer properties. 


Creating realistic shadows 


You've set up your elements, but unlike true 3D objects, they aren't casting any @ Note: Be sure to 

shadows. You'll create a shadow catcher and a light to add depth to your video. select the 3D Camera 
Tracker effect in the 

1 Go to 5:00, select the Shoreline.mov layer in the Timeline panel, and select Shoreline.mov layer, 
not the 3D Tracker 


the 3D Camera Tracker effect in the Effect Controls panel. 
Camera layer. 


2 Select the Selection tool in the Tools panel. Then, in the Composition panel, 
hover until you find a plane that is horizontal against the rocks. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 331 


Ð Tip: In a real-world 
project, it’s ideal to work 
with the lighting plan 
that was used to shoot 
the original 2D scene. 
The goal is to have the 
new 3D lights match the 
original source lighting 
as closely as possible. 


3 Right-click or Control-click the target, and choose Create Shadow Catcher 
And Light. 


Create Text 
Create Solid 
Create Null 


After Effects adds a light source to the scene. The default settings are applied, so 

a shadow appears in the Composition panel. However, you'll need to reposition 
the light to match the light in the source footage. The Shadow Catcher 1 layer 
that After Effects adds to the Timeline panel is a shape layer that has its material 
options set so that it accepts shadows only from the scene. 


4 Select the Light 1 layer in the Timeline panel, and press the P key to reveal 
the Position property for the layer. 


5 Enter the following values for the Position property to reposition the light: 
939.6, 169.7, 23.7. 


6 Choose Layer > Light Settings. Light Settings 


You can change the intensity, color, and 
other attributes of the light in the Light 
Settings dialog box. 


7 Choose Spot from the Light Type menu. 
Make sure the light color is white. Then 
change the Shadow Darkness to 15% 
and the Shadow Diffusion to 100 px. 
Click OK. 


8 Select the Shadow Catcher 1 layer in the Timeline panel, and press the S key 
to reveal the Scale property. 
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9 Change the Scale value to 340%. 


Scaling the Shadow Catcher 1 layer changes the area in which shadows can appear 
for the light that was created with it. 


Adding ambient light 


The shadow looks better after the adjustments you made to the light, but it’s now 
causing the text to appear black. You'll add ambient light to address this. Unlike 
a spot light, ambient light creates a more diffuse light throughout the scene. 


1 Deselect all layers, and then choose Layer > New > Light. 


2 Choose Ambient from the Light Type menu, and change its Intensity value to 80%. 
Make sure the light color is white, just like the spot light. 


3 Click OK to add the light to the scene. 


T Ambient Light E 
@ Lighti 4 
E Shadow Catcher 1 

EF Logo 


Adding an effect 


The 3D elements, camera, and lighting are all complete, but you can make the video 
more interesting by adding a ripple effect to the quotes. 


1 Go to 6:06. 
2 Inthe Effects & Presets menu, type Ripple in the search menu. 


3 Select the Dissolve-Ripple effect from the Transitions-Dissolves category, and 
drag it onto the Crab Quote 1 layer in the Timeline panel. 


The crab quote disappears, but it will gradually appear and ripple on the screen. 
4 Goto 7:15, and repeat step 3 for the Crab Quote 2 layer. 
5 Go to 9:01, and repeat step 3 for the Crab Quote 3 layer. 
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Previewing the composition 


All of the elements are in place, along with cameras, lighting, and effects. You'll preview 
the composition to see the results of your work. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


2 Press the spacebar to preview the movie. Let it play through completely once 
to cache the video and audio; once it’s cached, it should play in real time. 


SAEOTHER GUYS 


3 Press the spacebar again to stop playback. 


4 Choose File > Save to save the final project! 
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Review questions 


1 What does the 3D Camera Tracker effect do? 


2 Howcan you make an added 3D element look like it is the same size as elements that 
are farther from the camera? 


3 What is the Rolling Shutter Repair effect? 


Review answers 


1 The 3D Camera Tracker effect automatically analyzes the motion present in existing 
2D footage, extracts the position and lens type of the real camera that shot the scene, 
and creates a new 3D camera in After Effects to match it. The effect also overlays 
3D track points onto the 2D footage, so you can easily attach new 3D layers onto 
the original footage. 


2 To make an added 3D element appear to recede, so that it looks like it’s farther from 
the camera, adjust its Scale property. Adjusting the Scale property keeps its perspective 
locked with the rest of the composition. 


3 The Rolling Shutter Repair effect attempts to correct the “rolling” shutter problem 
that commonly occurs when you use digital cameras with CMOS sensors, which 
capture a frame of video one scan line at a time. Due to time lag between scan lines, 
not all parts of the image are recorded at exactly the same time, causing motion to 
ripple down the frame. If the camera or the subject is moving, the rolling shutter can 
cause distortions, such as leaning buildings and other skewed images. To use the effect, 
select the problem layer in the Timeline panel, and choose Effect > Distort > Rolling 
Shutter Repair. 
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ADVANCED EDITING 
TECHNIQUES 


Lesson overview 
In this lesson, you'll learn how to do the following: 
e Stabilize a shaky camera shot. 


e Use single-point motion tracking to track one object in a shot 
to another object in a shot. 


e Remove unwanted objects from video using content-aware fill. 
e Create a particle system. 


e Use the Timewarp effect to create slow-motion video. 


This lesson will take about two hours to complete. If you haven't already 
done so, download the project files for this lesson from www.adobepress. 
com/AfterEffectsCIB2020, following the instructions in the Getting 
Started section under “Accessing the lesson files and Web Edition” 


PROJECT: SPECIAL EFFECTS AND EDITING TECHNIQUES 


After Effects provides advanced motion 
stabilization, motion tracking, high-end effects, 
and other features for the most demanding 
production environments. 


@ Note: You can 
view these movies 

all at once or, if you 
don't plan to complete 
these exercises in one 
session, you can watch 
each sample movie 
just before you are 
ready to complete the 
associated exercise. 


Getting started 


In previous lessons, you've used many of the essential 2D and 3D tools you need 
for motion graphics design. But Adobe After Effects also offers motion stabiliza- 
tion, motion tracking, advanced keying tools, distortion effects, the capability to 
retime footage using the Timewarp effect, support for high dynamic range (HDR) 
color images, network rendering, and much more. In this lesson, you will learn how 
to use Warp Stabilizer VFX to stabilize a handheld camera shot, how to track one 
object to another in an image so that their motion is synchronized, and how to 
remove unwanted objects using content-aware fill. Finally, you will explore two of 
the high-end digital effects available in After Effects: a particle system generator and 
the Timewarp effect. 


This lesson includes multiple projects. Take a peek at all of them before beginning. 


1 Make sure the following files are in the Lessons/Lesson14 folder on your hard 
disk, or download them from www.adobepress.com now: 


e In the Assets folder: bee swarm.mov, koala.mov, metronome.mov, 
spinning_dog.mov 


e Inthe Sample_Movies folder, the AVI and MOV subfolders, each with the 
following files: Lesson14_Removal, Lesson14_Particles, Lesson14_Stabilize, 
Lesson14_Timewarp, and Lesson14_Tracking. 


2 Play the sample movies in the Lesson14/Sample_Movies/AVI folder in Windows 
Movies & TV or play the sample movies in the Lesson14/Sample_Movies/MOV 
folder in QuickTime Player to see the projects you will create in this lesson. 


3 When you're done, quit Windows Movies & TV or QuickTime Player. You 
may delete these sample movies from your hard disk if you have limited 
storage space. 


Stabilizing a shot 


If you shoot footage using a handheld camera, you will probably end up with shaky 
shots. Unless this look is intentional, you'll want to stabilize your shots to eliminate 
unwanted motion. 


Warp Stabilizer VFX in After Effects automatically removes extraneous jitters. 
When played back, the motion appears smooth, because the layer itself is scaled 
and moves incrementally to offset the unwanted movement. 
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Bicubic scaling 


When you scale video footage or an image to a larger size, After Effects must 
sample data to add information where none existed before. You can choose 
which sampling method After Effects uses when scaling a layer. For details, see 
After Effects help. 


Bilinear sampling may be a better option for sharp-edged graphics. However, 
bicubic sampling uses a more complex algorithm that typically provides better 
results when color transitions are more gradual, as in nearly all real-world photo- 
graphic images. 


To choose a sampling method for a layer, select the layer, and choose Layer > 

Quality > Bicubic or Layer > Quality > Bilinear. Bicubic and bilinear sampling are avail- 
able only for layers that are set to Best quality. (To change a layer’s quality setting to 
Best, choose Layer > Quality > Best.) You can also use the Quality and Sampling layer 
switch to toggle between the Bilinear and Bicubic sampling methods. 


If you need to scale an image by a large amount while preserving details, use the 
Detail-Preserving Upscale effect instead. The effect preserves the sharpness of sharp 
lines and curves. For example, you can scale up from SD frame sizes to HD frame sizes, 
or from HD frame sizes to digital cinema frame sizes. This effect is very closely related 
to the Preserve Details resampling option in the Image Size dialog box in Photoshop. 
Note that using the Detail-Preserving Upscale effect is slower than using either 
bilinear or bicubic scaling for the layer. 


Setting up the project 


As you start After Effects, restore the default application settings for After Effects. 


See “Restoring default preferences” on page 3. 


1 


2 


Start After Effects, and then immediately hold down Ctrl+Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. 


Click New Project in the Home window. 


After Effects opens to display a new, untitled project. 


3 
4 


Choose File > Save As > Save As. 


In the Save As dialog box, navigate to the Lessons/Lesson14/Finished_ 
Projects folder. 


Name the project Lesson14_Stabilize.aep, and then click Save. 
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Creating the composition 


You'll start by importing footage and creating the composition. 


1 Click New Composition From Footage in the Composition panel. 


2 Navigate to the Lessons/Lesson14/Assets folder. Select the bee swarm.mov file, 


and click Import or Open. 


After Effects creates a new composition named bee swarm with the same pixel size, 


aspect ratio, frame rate, and duration of the source clip. 


3 Click the Play button in the Preview panel to preview the footage. Press the 


spacebar to stop the preview when you've seen the whole clip. 


This clip was shot with a smartphone camera. Bees fly in and out of the swarm, 


a breeze rustles the vegetation, and the camera moves unsteadily. 


Warp Stabilizer VFX settings 


This is a summary of the Warp Stabilizer VFX settings to help you get started. 
To learn more about the settings, and to read more tips for using the effect 
successfully, see After Effects Help. 


Result controls the intended result. Smooth Motion makes camera movement 
smoother, but doesn’t eliminate it; use the Smoothness setting to control how 
smooth the movement becomes. No Motion attempts to remove all of the 
camera motion. 


Method specifies the most complex operation the Warp Stabilizer VFX performs 
on the footage to stabilize it: Position, which is based on position data only; 
Position, Scale, Rotation, which uses these three types of data; Perspective, 
which effectively corner-pins the entire frame; or Subspace Warp (the default), 
which attempts to warp various parts of the frame differently to stabilize the 
entire frame. 


Borders settings adjust how borders (the moving edges) are treated for footage 
that is stabilized. Framing controls how the edges appear in a stabilizing result, 
and determines whether the effect crops, scales, or synthesizes edges using 
material from other frames. 


Auto-scale displays the current auto-scale amount and allows you to set limits 
on the amount of auto-scaling. 


Advanced settings give you even greater control over the actions of the Warp 
Stabilizer VFX effect. 
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Applying Warp Stabilizer VFX 


Warp Stabilizer VFX starts analyzing footage as soon as you apply it. Stabilization 

is abackground process, so you can work on other compositions while it finishes. 
How long it takes depends on your system. After Effects displays a blue banner 
while it analyzes the footage and an orange banner while it applies stabilization. 


1 Select the bee swarm.mov layer in the Timeline panel, and choose Animation > 
Warp Stabilizer VFX. The blue banner appears immediately. 


2 When Warp Stabilizer VFX has finished stabilizing and the orange banner 
has disappeared, press the spacebar to preview the changes. 


3 Press the spacebar to stop the preview. 


The clip is still shaky, but it’s smoother than it was initially. Warp Stabilizer VFX 
moved and repositioned the footage. To see how it applied changes, view the effects 

in the Effect Controls panel. For example, the clip’s borders were scaled up (to about 
103%) to hide black gaps that occur when the image is repositioned in the stabilization 
process. You'll adjust the settings that Warp Stabilizer VFX uses. 


Removing motion blur 


If there are moments of blurriness after you stabilize the shot, try applying the 
Camera Shake Deblur effect. This effect analyzes frames on either side of the blurry 
frames for apparent sharpness and then blends the non-motion-blurred frames into 
the blurry frames. 


The effect works best on brief moments of blur caused by wind or camera bumps. 
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Adjusting the Warp Stabilizer VFX settings 
You'll change the settings in the Effect Controls panel to make the shot smoother. 


1 Inthe Effect Controls panel, increase the Smoothness amount to 75%. 


=E © Effect Cont 


bee swarm - bee swarm.mov 


{v 


v Stabilization.. 
Result goth Motion 


Method space Warp 


Preserve Scale 
v Borders 
Framing Stabilize, Crop, Auto-sca ` 
> Auto-scale (103.1%) 
> © Additional Scale % 
> Advanced 


| 
| 
| > Smoothness 
| 


Warp Stabilizer VFX immediately begins stabilizing again. It doesn't need to analyze 
the footage, because the initial analysis data is stored in memory. 


2 When Warp Stabilizer VFX has finished, preview the changes. 
3 Press the spacebar to stop playback when you're done. 


It’s better, but still a little rough. Rather than change the amount Warp Stabilizer 
VFX smooths the footage, now you'll change its goal. 


4 Inthe Effect Controls panel, choose No Motion from the Result menu. 


With this setting, Warp Stabilizer VFX attempts to lock the camera in position. 
This requires even more scaling. When No Motion is selected, the Smoothness 
option is dimmed. 


5 When the orange banner disappears, preview the changes again. Press the 
spacebar to stop the playback. 


Now the camera stays in position, so that the movement you notice is the rustling 
of the leaves in the wind, not the shakiness of the camera. In order to achieve this 
effect, Warp Stabilizer VFX had to scale the clip considerably. 


Fine-tuning the results 


The default analysis works well most of the time, but sometimes you may need to 
massage the end results even further. In this project, the clip skews subtly in a few 
places. Casual viewers may not notice the problem, but a keen producer will. You'll 
change the method that Warp Stabilizer VFX uses to remove the skew. 


342 LESSON 14 Advanced Editing Techniques 


1 Inthe Effect Controls panel, choose Perspective from the Method menu. 
2 Choose Stabilize Only from the Framing menu. 


3 Increase the Additional Scale to 114%. @ Note: Scaling a video 
layer up degrades the 
image. A good rule of 
thumb is to increase the 
layer to no more than 
ee 115% the size of the 
| Project W & Effect Controls = Si 8 j original source. 

bee swarm - bee swarm.mov 


EA Warp Stabilizer VFX 


Result No Motion 


> 
Method Perspective 
Preserve Scale o 
v Borders 
Framing Stabilize Only 
> 
> © Additional Scale 
> Advanced 


| 
v Stabilization 


4 Preview the changes. 


Now the shot looks steady. The only noticeable movement is that caused 
by the wind and the swarming bees. 


5 Press the spacebar to stop the playback when you're done. 
6 Choose File > Save to save your work, and then choose File > Close Project. 


As you have discovered, stabilizing a shot can have drawbacks. To compensate Tip: You can use 
for the movement or rotation data applied to the layer, the frames must be scaled, Warp Stabilizer VFX 
advanced settings to 


which could ultimately degrade the footage. However, if you must use a shaky shot schieveinotercomples 


in your production, this may be the best compromise. effects, too. To learn 
more, see Adobe After 
Effects CC Visual Effects 
° ° ° ° ° and Compositing Studio 
Using single-point motion tracking Techniques, available 


from Adobe Press. 
With the increase in the number of productions that incorporate digital elements 
into final shots, compositors need an easy way to synchronize computer-generated 
effects with film or video backgrounds. After Effects lets you do this with the capabil- 
ity to follow, or track, a defined area in the shot, and to apply that movement to other 
layers. These layers can contain text, effects, images, or other footage. The resulting 
visual effect precisely matches the original moving footage. 
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When you track motion in an After Effects composition that contains multiple lay- 
ers, the default tracking type is Transform. This type of motion tracking tracks posi- 
tion and/or rotation to apply to another layer. When tracking position, this option 
creates one track point and generates Position keyframes. When tracking rotation, 
this option creates two track points and produces Rotation keyframes. 


In this exercise, you will track a shape layer to the weighted arm of a metronome. 
This will be especially challenging, as the camera operator chose not to use a tripod. 


Setting up the project 


If you've just completed the first project, and After Effects is open, skip to step 3. 
Otherwise, restore the default application settings for After Effects. See “Restoring 
default preferences” on page 3. 


1 Start After Effects, and then immediately hold down Ctrl+Alt+Shift (Windows) 
or Command+Option+Shift (macOS) to restore default preferences settings. 
When prompted, click OK to delete your preferences. 


2 Click New Project in the Home window. 
After Effects opens to display a new, untitled project. 
3 Choose File > Save As > Save As. 


4 Inthe Save As dialog box, navigate to the Lessons/Lesson14/Finished_ 
Projects folder. 


5 Name the project Lesson14_Tracking.aep, and then click Save. 


Creating the composition 


You need to import one footage item to start this project. You'll use it to create 
the composition. 


1 Click New Composition From Footage in the Composition panel. 


2 Navigate to the Lessons/Lesson14/Assets folder. Select the metronome.mov 
file, and then click Import or Open. 


After Effects creates a new composition named metronome, with the same pixel 
size, aspect ratio, frame rate, and duration as the source clip. 


3 Drag the current-time indicator across the time ruler to manually preview 
the footage. 
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Creating a shape layer 


You're going to attach a star to the end of the metronome. First, you need to create 
the star. You'll use a shape layer. 


1 Press the Home key or move the current-time indicator to the beginning of the 
time ruler. 


2 Click an empty area of the Timeline panel to deselect the layer. 


3 Select the Star tool (%), hidden behind the Rectangle tool (Œ) in the Tools panel. 


Rectangle Tool 


metronome = 


Rounded Rectangle Tool 


Source Name 


D metronome.mov 


4 Click the Fill Color swatch, and select a light yellow (such as R=220, G=250, 
B=90). Click the word Stroke, select None in the Stroke Options dialog box, 
and click OK. 


Stroke Options xX 


5 Inthe Composition panel, draw a small star. 


6 Use the Selection tool (>) to position the star over the weighted end of the 
pendulum arm. 


7 Select Shape Layer 1 to see the layer’s anchor point. Use the Pan Behind tool (1%) 
to move the anchor point to the center of the star shape, if it isn’t already there. 


® Note: If you don't 
see the Fill Color 
swatch, make sure 

you don't have a layer 
selected. When a layer 
is selected, shape tools 
draw masks. 


B Tip: You can change 
the preferences to 
automatically place 
the anchor point in the 
center of a new layer 
shape. Choose 

Edit > Preferences > 
General (Windows) 

or After Effects > 
Preferences > General 
(macOS). Select Center 
Anchor Point In New 
Shape Layers, and 
click OK. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 345 


® Note: In this 
exercise, you want the 
star to move atop the 
metronome weight. 
However, if you wanted 
an object to move in 
relationship to the 
tracked area but not 
on top of it, you could 
reposition the attach 
point accordingly. 


Positioning the track point 


After Effects tracks motion by matching pixels from a selected area in a frame 

to pixels in each succeeding frame. You create tracking points to specify the area 
to track. A track point contains a feature region, a search region, and an attach 
point. After Effects displays the track point in the Layer panel as it tracks. 


You will track the metronome weight (the rhombus at the end of its arm) by placing 
tracking regions around the area that you'll track another layer to. With the star shape 
added to the Tracking composition, you are ready to position the track point. 


1 Select the metronome.mov layer in the Timeline panel. 


2 Choose Animation > Track Motion. The Tracker panel opens; increase its size 
if you can’t see all the options. 


After Effects opens the selected layer in the Layer panel. The Track Point 1 indicator 
is in the center of the image. 


metronomemov YV 


k: Tracker 1 v 


Notice the settings in the Tracker panel: Metronome.mov is selected in the Motion 
Source menu. The Current Track is Tracker 1, and the Motion Target is Shape Layer 
1, because After Effects automatically sets the Motion Target to the layer immedi- 
ately above the source layer. 


Now, youll position your track point. 


3 Using the Selection tool (>), move the Track Point 1 indicator (drag the empty 
portion of the inner box) in the Layer panel over the metronome weight. 


4 Enlarge the search region (the outer box) to encompass the area around the 
pendulum. Then adjust the feature region (the inner box) within the weight. 
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Moving and resizing 
the track points 


In setting up motion tracking, it’s often necessary to refine a track point by adjusting 
its feature region, search region, and attach point. You can resize or move these 
items independently or in groups by dragging with the Selection tool. The pointer 
icon changes to reflect one of many different activities. 


Failte 


Track point components (left) and Selection tool pointer icons (right): 

A. Search region B. Feature region C. Attach point D. Moves search region 
E. Moves both regions F. Moves entire track point G. Moves attach point 
H. Moves entire track point I. Resizes region 


A B C 


e To turn feature region magnification on or off, choose Magnify Feature When 
Dragging from the Tracker panel menu. A check mark appears next to the 
option when it’s on. 


e To move only the search region, using the Selection tool, drag the edge 
of the search region; the Move Search Region pointer (œ) appears (D, above). 


e To move just the feature and search regions together, Alt-drag (Windows) or 
Option-drag (macOS) with the Selection tool inside the feature or search region; 
the Move Both Regions pointer (*+») appears (E, above). 


e To move only the attach point, using the Selection tool, drag the attach point; 
the Move Attach Point pointer (>) appears (G, above). 


e To resize the feature or search region, drag a corner handle (I, above). 


e To move the feature region, search region, and attach point together, drag with the 
Selection tool inside the track point area (avoiding the region edges and the attach 
point); the Move Track Point pointer (*») appears. 


For more information about track points, see After Effects Help. 
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Analyzing and applying tracking 


Now that the search and feature regions are defined, you can apply the tracker. 


@ Note: The tracking 1 Click the Analyze Forward button (®) in the Tracker panel. Watch the analysis 
analysis may take quite to ensure the track point stays with the metronome weight. If it doesn’t, press the 
awhile- The larger thè spacebar to stop the analysis, and reposition the feature region. (See the sidebar 
search and feature , een 

regions, the longer Checking for drift”) 

After Effects takes to 


snalyzediackina: 2 When the analysis is complete, click the Apply button. 


3 Inthe Motion Tracker Apply Options dialog box, click OK to apply the tracking 
to the x and y dimensions. 


Tracker 


(Stabilize Motion ) 


Motion Source: metronomemov Y 
Current Track: Tracker 1 v 


Track Type: Transform 


Position oO Rotat 


The motion-tracking data is added to the Timeline panel, where you can see that 
the track data is in the metronome layer, but the results are applied to the Position 
property of the Shape Layer 1 layer. 


4 Press the spacebar to preview the movie. The star not only follows the 
pendulum; it moves with the camera’s movement. 
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5 When you're ready, press the spacebar to stop playback. 


6 Hide the properties for both layers in the Timeline panel, choose File > Save, 
and then choose File > Close Project. 


Motion tracking an element onto background footage can be fun. As long as you have 
a stable feature to track, single-point motion tracking can be quite easy. 


Checking for drift 


As an image moves in a shot, the lighting, surrounding objects, and angle of 

the object can all change, making a once-distinct feature no longer identifiable 

at the subpixel level. It takes time to develop an eye for choosing a trackable feature. 
Even with careful planning and practice, you may often find that the feature region 
drifts away from the desired feature. Readjusting the feature and search regions, 
changing the tracking options, and trying again are all standard parts of digital 
tracking. When you notice drifting occurring, try the following: 


1 Immediately stop the analysis by pressing the spacebar. 
2 Move the current-time indicator back to the last good tracked point. You can see 
this in the Layer panel. 


3 Reposition and/or resize the feature and search regions, being careful not 
to accidentally move the attach point. Moving the attach point will cause a 
noticeable jump in your tracked layer. 


4 Click the Analyze Forward button to resume tracking. 


Removing unwanted objects 


It can be frustrating and tedious to remove unwanted objects from video, especially 
if the object moves between frames. The Content-Aware Fill feature in After Effects 
makes it possible to remove distractions such as microphones or other filming 
equipment, incongruous landscape elements, or even people. The feature removes 
the area you select, and then it analyzes frames over time to synthesize new pixels 
from other frames. You can adjust settings in the Content-Aware Fill panel to help 
the new fill blend seamlessly with the rest of the image. For information about the 
options available in the panel and techniques to use for different types of video, see 
After Effects Help. 
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You'll remove a bolt from the tree in a video of a koala so that the koala’s environment 
appears to be a more natural setting. If you haven't already watched the sample 
movie for this exercise, do so now. 


Setting up the project 


Start by launching After Effects and creating a new project. 


1 


If it’s not already open, start After Effects, and then immediately hold down 
Ctrl+Alt+Shift (Windows) or Command+Option+Shift (macOS) to restore 
default preferences settings. When prompted, click OK to delete your preferences, 
and click New Project in the Home window. 


After Effects opens to display an empty, untitled project. 


2 
3 


Choose File > Save As > Save As. 


In the Save As dialog box, navigate to the Lessons/Lesson14/ 
Finished_Projects folder. 


Name the project Lesson14_Content-Aware.aep, and then click Save. 


Double-click an empty area of the Project panel to open the Import File dialog 
box, and then navigate to the Lessons/Lesson14/Assets folder. 


Select the koala.mov file, and then click Import or Open. 


In the Project panel, drag the koala.mov file onto the New Composition button 
in the Composition panel. 
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8 Inthe Timeline panel, manually preview the footage. Notice the bolt in the tree. 


9 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


Creating a mask 


You'll start by identifying the area to be filled. You can use any technique you like 
to create a transparent area, but for this clip, it’s easiest to create and track a mask. 


1 Zoom in to see the bolt clearly. 


2 Select the koala.mov layer in the Timeline panel. Selecting the layer ensures 


you'll draw a mask instead of creating a new shape layer. 


3 Select the Ellipse tool (@), hidden behind the Star tool (We) or the Rectangle 
tool (H) in the Tools panel. 


4 Drag an ellipse so that it completely covers and is slightly larger than the bolt. 
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6 Right-click or Control-click Mask 1, and choose Track Mask. 
After Effects opens the Tracker panel. 


7 Inthe Tracker panel, select Position from the Method menu. Click the Track 
Selected Masks Forward button. 


45 AE 


-mı Blkoatamov = 
Mask 
E Mask 1 


8 Go to the beginning of the time ruler. Press the spacebar to preview the mask. 
Press the spacebar again to stop preview. If the mask slips from the bolt, adjust 
it as needed. 


9 Choose File > Save to save your work so far. 


Applying Content-Aware Fill 
You're ready to replace the masked area with content-aware fill. 
1 Select the koala.mov layer in the Timeline panel. 


2 Choose Window > Content-Aware Fill. After Effects open the Content-Aware 
Fill panel in the panel dock. 


3 In the Content-Aware Fill panel, do the following: 
e Set Alpha Expansion to 10. 
e Choose Object from the Fill Method menu. 
e Choose Entire Duration from the Range menu. 


The Alpha Expansion setting increases the size of the 
area to fill. Content- Aware Fill often performs better 
when the selected area includes pixels outside the 
object you're removing. The Fill Method determines 
how the feature samples pixels and accommodates 
motion in the video. Range determines whether the 
fill layer is rendered for only the work area or for the 
entire composition. 


4 Click Generate Fill Layer. 


Generate Fill Layer bs 
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After Effects analyzes each frame and fills the transparent area. It places the 
sequence of images it analyzed in a Fill layer in the Timeline panel, with the name 
including the number of images in that sequence. 


5 Deselect all layers, and choose Fit from the Magnification Ratio menu so you 
can see the full video. 


6 Move the current-time indicator to the beginning of the timeline, and preview 


the movie to see the results of the fill. 


7 When you're done watching the preview, press the spacebar to stop playback. 


8 Hide the layer properties to keep the Timeline panel neat, and choose File > Save 
to save your work. 


9 Choose File > Close Project. 


Mocha AE — 7 


You've used the Tracker panel to track points in several videos in this book, with ~ l 
pretty good results. However, in many cases, you'll get better and more accurate ` 
tracking results using the Mocha AE plug-in from Boris FX. To track using Mocha, 

choose Animation > Track In Boris FX Mocha. You can access the full Mocha interface 

by choosing Effect > Boris FX Mocha > Mocha AE and launching Mocha AE. 


One advantage of Mocha is that you don't have to accurately place tracking points 
to obtain a perfect track. Rather than using tracking points, Mocha uses a planar 
tracker, which attempts to track an object's translation, rotation, and scaling data 
based on the movement of a user-defined plane. Planes provide more detail to the 
computer than is possible with single-point and multipoint tracking tools. 


When you work with Mocha, you need to identify planes that coincide with move- 
ment you want to track in a clip. Planes don’t have to be tabletops or walls. For 
example, if someone is waving goodbye, you can use their upper and lower limbs 
as two planes. After you track the planes, you can export the tracking data for use 
in After Effects. 


To learn more about Mocha, launch Mocha AE, and choose Help > Help. 
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Understanding Particle 
Systems II properties 


Particle systems have a unique vocabulary. Some of the key settings are explained 
here for your reference. They're listed in the order in which they appear (top to 
bottom) in the Effect Controls panel. 


Birth Rate Controls the number of particles generated per second. The value itself 
is arbitrary and does not equal the actual number of particles being generated. 
However, the higher the number, the more densely packed the particles become. 


Longevity Determines how long the particles are visible. 


Producer Position Controls the center point or origin of the particle system. The 
position is set based on the x, y coordinates. All particles emanate from this single 
point. You can control the size of the producer by making adjustments to the x and y 
radius settings. The higher these values, the larger the producer point will be. A high 
x value and a y value of zero (0) result in a line. 


Velocity Controls the speed of particles. The higher the number, the faster the 
particles move. 


Inherent Velocity % Determines how much of the velocity is passed along 
to the particles when the Producer Position is animated. A negative value causes 
the particles to move in the opposite direction. 


Gravity Determines how fast particles fall. The higher the value, the faster the 
particles fall. A negative value causes particles to rise. 


Resistance Simulates particles interacting with air or water, slowing over time. 


Direction Determines which direction the particles flow. Use with the Direction 
Animation type. 


Extra Introduces randomness into the movement of the particles. 


Birth/Death Size Determines the size of the particles when they are created 
and when they expire. 


Opacity Map Controls opacity changes for the particle over its lifetime. 


Color Map Use with the Birth and Death colors to shade the particles over time. 
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Creating a particle simulation 


After Effects includes several effects that do an excellent job of creating particle 
simulations. Two of them—CC Particle Systems II and CC Particle World—are 

based on the same engine. The major difference between the two is that Particle 
World enables you to move the particles in 3D space rather than in a 2D layer. 


In this exercise, you'll learn how to use the CC Particle Systems II effect to create 
a supernova that could be used as the opening of a science program or as a motion 
background. If you haven’t already watched the sample movie for this exercise, 
do so now before continuing. 


Setting up the project 
Start by launching After Effects and creating a new composition. 


1 Ifit’s not already open, start After Effects, and then immediately hold down 
Ctrl+Alt+Shift (Windows) or Command+Option+Shift (macOS) to restore 
default preferences settings. When prompted, click OK to delete your 
preferences, and click New Project in the Home window. 


After Effects opens to display an empty, untitled project. 
2 Choose File > Save As > Save As. 


3 Inthe Save As dialog box, navigate to the Lessons/Lesson14/ 
Finished_Projects folder. 


4 Name the project Lesson14_Particles.aep, and then click Save. 


You don’t need to import any footage items for this exercise. However, you do need 
to create the composition. 


5 Click New Composition in the Composition panel. 


ADOBE AFTER EFFECTS CLASSROOM IN A BOOK (2020 RELEASE) 355 


6 Inthe Composition Settings dialog box, do the following, and then click OK: 
e Type Supernova in the Composition Name field. 
e Choose HDTV 1080 29.97 from the Preset pop-up menu. 
e Set the Duration to 10:00. 


Composition Settings x 


Creating a particle system 

You will build the particle system from a solid layer, so you'll create that next. 
1 Choose Layer > New > Solid to create a new solid layer. 

2 Inthe Solid Settings dialog box, type Particles in the Name box. 


3 Click Make Comp Size to make the layer the same size as the composition. Then 
click OK. 
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Solid Settings x 


4 With the Particles layer selected in the Timeline panel, choose Effect > 
Simulation > CC Particle Systems II. 


5 Go to 4:00 to see the particle system. 


Supernova = 


lopped > = Source Name Bt, 


co =) as 


A large stream of yellow particles appears in the Composition panel. 


Customizing the particle effect 


You will turn this stream of particles into a supernova by customizing the settings 
in the Effect Controls panel. 
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1 Expand the Physics property group in the Effect Controls panel. The Explosive 
Animation setting works fine for this project, but instead of the particles 
falling down, you want them to flow out in all directions, so change the 
Gravity value to 0.0. 


| Supernova - Particles 
CC Particle Systems Il 
> © Birth Rate 


> Longevity (sec) 


» Producer 

¥ Physics 
© Animation Explosive 

> © Velocity 0 

> © Inherit Velocity % 

ae) Gravity 


2 Hide the Physics property group, and expand the Particle property group. 
Then choose Faded Sphere from the Particle Type menu. 


Now the particles look intergalactic. Don’t stop there, though. 
3 Change the Death Size to 1.50, and increase the Size Variation to 100%. 
This allows the particles to change birth size randomly. 


4 Reduce the Max Opacity to 55% to make the particles semitransparent. 


— Particles 
E7 
| > ope Rate 
| > Longevity (sec 
| > Producer 
> Physics 
| ¥ Particle 
| 


©) Particle Type Faded Sphere 
©) Birth Size 

© Death Size 

© Size Variation 

5 Opacity Map 

© Max Opacity 


5 Click the Birth Color swatch, and change the color to R=255, G=200, B=50 
to give the particles a yellow hue at birth. 
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6 Click the Death Color swatch, and change the color to R=180, G=180, B=180 
to give the particles a light gray hue as they fade out. 


¥ Particle 
© Particle Type Faded Sphere 
rth Size 5 
Death Size 


Size Variation 00.0% 


Opacity Map Fade Out v 
Max Opacity 55.0% 
O Source Alpha Inheritan 
Birth to Death be 


7 To keep the particles from staying onscreen too long, decrease the Longevity @ Note: Even though 
value to 0.8 seconds. they're at the top of the 

Effect Controls panel, it 

is often easier to adjust 

the Longevity and 

Birth Rate settings after 

| you have set the other 

| Supernova - Particles | particle properties. 


> © Birth Rate 
> Longevity (sec) 


The Faded Sphere particle type softens the look, but the particle shapes are still 
too sharply defined. You will fix that by blurring the layer to blend the particles with 
one another. 


8 Hide the CC Particle Systems II effect properties. 
9 Choose Effect > Blur & Sharpen > Gaussian Blur. 


10 In the Gaussian Blur area of the Effect Controls panel, increase the Blurriness 
value to 10. Then select Repeat Edge Pixels to keep the particles from being 
cropped at the edge of the frame. 


Project 
| Supernova - Particles 
» fx CC Particle Systems Il 


> ©) Blurriness 


() Blur Dimensions Horizontal and Verti v 
č Repeat Edge Pixels 
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Creating the sun 
You will now create a bright halo of light that will go behind the particles. 
1 Go to 7:00. 
2 Press Ctrl+Y (Windows) or Command+Y (macOS) to create a new solid layer. 
3 In the Solid Settings dialog box, do the following: 
e Type Sun in the Name box. 
e Click Make Comp Size to make the layer the same size as the composition. 


e Click the color swatch, and make the layer the same yellow as the Birth Color 
of the particles (R=255, G=200, B=50). 


e Click OK to close the Solid Settings dialog box. 


Solid Settings x 


4 Drag the Sun layer below the Particles layer in the Timeline panel. 


5 Select the Ellipse tool (®), which may be hidden behind the Rectangle tool (Hf) 
or the Star tool (#¥) in the Tools panel, and Shift-drag in the Composition panel 
to draw a circle with a radius of roughly 100 pixels, or one-fourth the width 
of the composition. You’ve created a mask. 
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6 Using the Selection tool (>), drag the mask shape to the center of the 


Composition panel. 


7 With the Sun layer selected in the Timeline panel, press the F key to reveal its 
Mask Feather property. Increase the Mask Feather amount to 100, 100 pixels. 


Supernova = 


$ Source Name 

1 Particles 

2 

v Mask 1 

©) Mask Feather 


8 Press Alt+[ (Windows) or Option+[ (macOS) to set the In point of the layer 
to the current time. 


inverted 


pixels 


9 Hide the properties for the Sun layer. 


Lighting the darkness 
Since the sun is bright, it should illuminate the surrounding darkness. 
1 Make sure the current-time indicator is still at 7:00. 


2 Press Ctrl+Y (Windows) or Command+Y (macOS) to create a new solid layer. 
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3 In the Solid Settings dialog box, name the layer Background, click the Make 
Comp Size button to make the layer the same size as the composition, and then 
click OK to create the layer. 


4 Inthe Timeline panel, drag the Background layer to the bottom position 
in the layer stack. 


5 With the Background layer selected in the Timeline panel, choose Effect > 
Generate > Gradient Ramp. 


Supernova - Background 

vas Gradient Ramp 
© Start of Ramp 
5) Start Color 


5) End of Ramp , 

5) End Color E j 
5) Ramp Shape Linear Ramp 
5) Ramp Scatter 

5) Blend With Original 


The Gradient Ramp effect creates a color gradient, blending it with the original 
image. You can create linear ramps or radial ramps, and vary the position and 
colors of the ramp over time. Use the Start Of Ramp and End Of Ramp settings 
to specify the start and end positions. Use the Ramp Scatter setting to disperse 
the ramp colors and eliminate banding. 
6 Inthe Gradient Ramp area of the Effect Controls panel, do the following: 

e Change Start Of Ramp to 960, 538 and End Of Ramp to 360, 525. 

e Choose Radial Ramp from the Ramp Shape menu. 

e Click the Start Color swatch, and set the start color to dark blue 

(R=0, G=25, B=135). 
e Set the End Color to black (R=0, G=0, B=0). 


(©) Start of Ramp 
5) Start Color 


© End of Ramp 


Ü) End Color 


5 Ramp Shape Radial Ramp 


7 Press Alt+[ (Windows) or Option+[ (macOS) to set the In point of the layer 
to the current time. 
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Adding a lens flare 
To tie all the elements together, you'll add a lens flare to simulate an explosion. 


1 Press the Home key or move the current-time indicator to the beginning 
of the time ruler. 


N 


Press Ctrl+Y (Windows) or Command+Y (macOS) to create a new solid layer. 


w 


In the Solid Settings dialog box, name the layer Nova, click the Make Comp 
Size button to make the layer the same size as the composition, set the Color 
to black (R=0, G=0, B=0), and then click OK. 


4 Drag the Nova layer to the top of the layer stack in the Timeline panel. Then, 
with the Nova layer selected, choose Effect > Generate > Lens Flare. 


Supernova = 


Source Name Rte, 
a / 
Particles SP / 
Sun a |/ 
Background CA 


5 Inthe Lens Flare area of the Effect Controls panel, do the following: 
e Change Flare Center to 960, 538. 
e Make sure 50-300mm Zoom is selected in the Lens Type menu. 


e Decrease Flare Brightness to 0%, and then click the Flare Brightness 
stopwatch icon (6) to create an initial keyframe. 


6 Goto 0:10. 
7 Increase the Flare Brightness to 240%. 
8 Go to 1:04, and decrease the Flare Brightness to 100%. 


| Supernova - Nova 
A Lens Flare | 
© Flare Center 
> © Flare Brightness 


© Lens Type 50-300mm Zoom 
> © Blend With Original 0% 
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9 With the Nova layer selected in the Timeline panel, press the U key to see 
the animated Lens Flare property. 


10 Right-click or Control-click the ending Flare Brightness keyframe, and choose 
Keyframe Assistant > Easy Ease In. 


11 Right-click or Control-click the beginning Flare Brightness keyframe, and choose 
Keyframe Assistant > Easy Ease Out. 


Supernova = 


Lens Flare 
~ Fare Brightness 
Particles 
Sun 
Background 


Finally, you need to make the layers under the Nova layer visible in the composition. 


12 Press F2 to deselect all layers, and choose Columns > Modes from the Timeline 
panel menu. Then choose Screen from the Mode menu for the Nova layer. 


Supernova = 


~ AEO 


Lens Flare 


™ Flare Brightness 
Particles p f Normal 


Sun § Normal 
Background > f Normal 


13 Preview the movie. When youre done, press the spacebar to stop the preview. 


14 Choose File > Save, and then choose File > Close Project. 
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About high dynamic 
range (HDR) footage 


After Effects supports high dynamic range (HDR) color. 


The dynamic range (ratio between dark and bright regions) in the physical world 
far exceeds the range of human vision and of images that are printed or displayed 
ona monitor. But while human eyes can adapt to very different brightness levels, 
most cameras and computer monitors can capture and reproduce only a limited 
dynamic range. Photographers, motion-picture artists, and others working with 
digital images must be selective about what’s important in a scene, because they’re 
working with a limited dynamic range. 


HDR footage opens up a world of possibilities, because it can represent a very wide 
dynamic range through the use of 32-bit floating-point numeric values. Floating- 
point numeric representations allow the same number of bits to describe a much 
larger range of values than integer (fixed-point) values. HDR values can contain 
brightness levels, including objects as bright as a candle flame or the sun, that far 
exceed those in 8-bit-per-channel (bpc) or 16-bpc (non-floating-point) mode. Lower 
dynamic range 8-bpc and 16-bpc modes can represent RGB levels only from black 
to white, which comprises an extremely small segment of the dynamic range in the 
real world. 


After Effects supports HDR images in a variety of ways. For example, you can create 
32-bpc projects to work with HDR footage, and you can adjust the exposure, or 
the amount of light captured in an image, when working with HDR images in After 
Effects. For more information about support in After Effects for HDR images, see 
After Effects Help. 


Retiming playback using the Timewarp effect 


The Timewarp effect in After Effects gives you precise control over a wide range 
of parameters when changing the playback speed of a layer, including interpolation 
methods, motion blur, and source cropping to eliminate unwanted artifacts. 


In this exercise, you will use the Timewarp effect to change the speed of a clip, 
slowing it down and speeding it up at different points. If you haven't already 
watched the sample movie for this exercise, do so now. 
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Setting up the project 
Start by launching After Effects and creating a new project. 


1 If After Effects isn’t open, start it, and then immediately hold down 
Ctrl+Alt+Shift (Windows) or Command+Option+Shift (macOS) to 
restore default preferences settings. When prompted, click OK to delete 
your preferences, and click New Project in the Home window. 


After Effects opens to display an empty, untitled project. 
2 Choose File > Save As > Save As. 


3 In the Save As dialog box, navigate to the Lessons/Lesson14/ 
Finished_Projects folder. 


4 Name the project Lesson14_Timewarp.aep, and then click Save. 


5 Click New Composition From Footage in the Composition panel. Then navigate 
to the Lessons/Lesson14/Assets folder on your hard disk, select the spinning_ 
dog.mov file, and click Import or Open. 


After Effects creates a new composition named for the source file, and displays 
it in the Composition and Timeline panels. 


6 Choose File > Save to save your work. 


Using Timewarp 


In the source footage, a dog spins as she moves from room to room. At around 4 
seconds, you'll slow the motion down to 10%, and then ramp up to twice the original 
speed before slowing back to full speed at the end of the clip. 


1 With the spinning _dog.mov layer selected in the Timeline panel, choose Effect > 
Time > Timewarp. 


2 Inthe Timewarp area of the Effect Controls panel, make sure Pixel Motion is 
selected in the Method menu and Speed is selected in the Adjust Time By menu. 


With Pixel Motion selected, Timewarp creates new frames by analyzing the pixel 
movement in nearby frames and creating motion vectors. The Speed option controls 
the time adjustment by percentage rather than by a specific frame. 
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3 Goto 2:00. 


4 Inthe Effect Controls panel, set the Speed to 100, and click the stopwatch 
icon (ð) to set a keyframe. 


fx Timewearp 


The Timewarp effect will keep the speed of the clip at 100% until the 2-second mark. 


5 With the spinning _dog.mov layer selected in the Timeline panel, press 
the U key to see the animated Timewarp Speed property. 


6 Go to 5:00, and set the Speed to 10. After Effects adds a keyframe. 


Timewarp 
Speed 


S ef e 
B 
Timewarp 
Speed 


= 5 e Name 
E B [spinning dog.mov 
Timewarp 
Speed 
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® Note: Be patient. 
The first time through, 
After Effects is caching 
information in RAM. 
The second time it 
plays, playback will 

be more accurate. 


9 Go to 11:00, and set the Speed to 100. After Effects adds a keyframe. 


10 Press the Home key or move the current-time indicator to the beginning 
of the time ruler, and then press the spacebar to watch a preview of the effect. 


The speed adjustments are rather abrupt—not the smooth, slow-motion curve 
you would expect to see in a professional effect. This is because the keyframes 
are linear instead of curved. You'll fix that next. 


11 Press the spacebar to stop playback when you're ready. 


12 Click the Graph Editor button in the Timeline panel to display the Graph Editor 
instead of the layer bars. Make sure the Speed property name for the spinning__ 
dog layer is selected. The Graph Editor displays its graph. 
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13 Click to select the first Speed keyframe (at 2:00), and then click the Easy Ease 
icon (7°) at the bottom of the Graph Editor. 


This adjusts the influence into and out of the keyframe to smooth out sudden 
changes. 


14 Repeat step 13 for the other Speed keyframes in the motion graph, at 5:00, 
7:00, 9:00, and 11:00. 


Tip: Close columns 
in the Timeline panel 
to see more icons in the 
Graph Editor. You can 
also apply an Easy Ease 
adjustment by pressing 
the F9 key. 


Note: If you click 
the Speed property 
a second time, all the 
keyframes are selected 
and changes you make 
to one affect all of them. 


Tip: You can 
tweak a motion graph 
by dragging the Bezier 
handles. You used 
Bezier handles in 
Lesson 7,“Working 
with Masks.” 
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15 Preview the movie again. This time, the slow-motion Timewarp effect 


looks professional. 


16 Choose File > Save to save the project, and then choose File > Close Project. 


You’ve now experimented with some of the advanced features in After Effects, 
including motion stabilization, motion tracking, particle systems, and the 
Timewarp effect. To render and export any or all of the projects you completed 
in this lesson, see Lesson 15, “Rendering and Outputting,’ for instructions. 
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Review questions 


—_ 


A WwW N 


What is Warp Stabilizer VFX, and when do you need to use it? 
Why might drifting occur when you're tracking an image? 
What is the birth rate in a particle effect? 


What does the Timewarp effect do? 


Review answers 


1 


Shooting footage using a handheld camera typically results in shaky shots. Unless this 
look is intentional, you will want to stabilize the shots to eliminate unwanted motion. 
Warp Stabilizer VFX in After Effects analyzes the movement and rotation of the target 
layer, and then makes adjustments to it. When played back, the motion appears smooth, 
because the layer itself moves incrementally to offset the unwanted motion. You can 
change the way Warp Stabilizer VFX crops, scales, and performs other adjustments 

by modifying settings for the effect. 


Drifting occurs when the feature region loses the feature that’s being tracked. As an 
image moves in a shot, the lighting, surrounding objects, and angle of the object can 
change, making a once-distinct feature unidentifiable at the subpixel level. Even with 
careful planning and practice, the feature region often drifts away from the desired 
feature. Readjusting the feature and search regions, changing the tracking options, 
and trying again are all standard procedures in digital tracking. 


The birth rate in a particle effect determines how often new particles are created. 


The Timewarp effect gives you precise control over a wide range of parameters 
to change the playback speed of a layer, including interpolation methods, motion 
blur, and source cropping to eliminate unwanted artifacts. 
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T 5 RENDERING AND OUTPUTTING 


372 


Lesson overview 


In this lesson, you'll learn how to do the following: 


Output movies using the Render Queue. 

Create templates for the Render Queue. 

Output movies using Adobe Media Encoder. 

Select the appropriate compressor for your delivery format. 
Use pixel aspect ratio correction. 

Produce a test version of a composition. 

Create custom encoding presets in Adobe Media Encoder. 


Render and output a web version of the final composition. 


The total amount of time required to complete this lesson depends in part 


on the speed of your processor and the amount of RAM available for ren- 


dering. The amount of hands-on time required is less than an hour. If you 


haven't already done so, download the project files for this lesson from 


www.adobepress.com/AfterEffectsCIB2020, following the instructions 


in the Getting Started section under “Accessing the lesson files and 
Web Edition” 


N 
a ee ee 
I - 
A; 
on the move 

WEB 

a EO 

v 
y f 
on the move 
PROJECT: OUTPUTTING YOUR PROJECT FOR MULTIPLE USES BROADCAST 


The success of any project depends on your ability to 
deliver it in the format you need, whether it’s for the 
web or broadcast output. Using Adobe After Effects 
and Adobe Media Encoder, you can render and 
export a final composition in a variety of formats 


and resolutions. 


@ Note: The Lesson15_ 
HD_test_1080p.mp4 

file includes only the 
first three seconds of 
the movie. 


® Note: If you receive 
an error message 
about missing layer 
dependencies (Arial 
Narrow Regular), 

click OK. 


Getting started 


This lesson continues from the point at which many of the preceding lessons end: 


when you're ready to output the final composition. In order to produce several 


versions of the animation for this lesson, you'll explore options available within the 


Render Queue panel and Adobe Media Encoder. For this lesson, we provide you 


with a starting project file that is essentially the final composition from Lesson 1 
of this book. 


1 


Make sure the following files are in the Lessons/Lesson15 folder on your hard 
disk, or download them from www.adobepress.com now: 


e In the Assets folder: movement.mp3, swimming_dog.mp4, title.psd 
e In the Start_Project_File folder: Lesson15_Start.aep 


e Inthe Sample_Movies folder: Lesson15_Draft_RQ.avi, Lesson15_Draft_ 
RQ.moy, Lesson15_Final_Web.mp4, Lesson15_HD-test_1080p.mp4, 
Lesson15_Lowres_YouTube.mp4 


Open and play the sample movies for Lesson 15, which represent different 

final versions of the movie—rendered with different quality settings—that you 
created in Lesson 1. (If you’re using Windows, watch the Lesson15_Draft_RQ.avi 
movie, and if you're using macOS, watch the Lesson15_Draft_RQ.mov movie.) 
When you're done viewing the sample movies, quit Windows Movies & TV or 
QuickTime Player. You may delete the sample movies from your hard disk if you 
have limited storage space. 


As always, when you begin the lesson, restore the default application settings for 


After Effects. See “Restoring default preferences” on page 3. 


3 Start After Effects, and then immediately hold down Ctrl+ Alt+Shift (Windows) 


or Command+Option+Shift (macOS). When prompted, click OK to delete your 
preferences. 


4 Click Open Project in the Home window. 


Tips to elevate your work 


Develop more skills 


5 Navigate to the Lessons/Lesson15/Start_Project_File folder, select the Lesson15_ 


Start.aep file, and click Open. 
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6 Choose File > Save As > Save As. 


7 Inthe Save As dialog box, navigate to the Lessons/Lesson15/ 
Finished_Project folder. 


8 Name the project Lesson15_Finished.aep, and then click Save. 


About rendering and output 


Rendering a composition creates the frames of a movie from all the layers, settings, 
effects, and other information that makes up the model for that image. After Effects 
renders content every time it creates a preview, but this lesson focuses on the ren- 
dering process that occurs when you've completed your composition and are ready 
to share your movie. You can generate a final movie file using the Render Queue 
panel in After Effects or Adobe Media Encoder. (The Render Queue uses an embed- 
ded version of Adobe Media Encoder to encode most movie formats, but doesn’t 
include all the features of the separate application.) 


When you use the Render Queue to create your final output, there are two steps to 
the process: After Effects renders the composition and then encodes the rendered 
frames into output files. In the Render Queue, the first step is governed by the ren- 
der settings you've selected, and the second by the selected output module. 


Adobe recommends that you use Adobe Media Encoder to create a high-quality 
movie file that is compressed for the web, DVD, or Blu-ray disc. 


Exporting using the Render Queue 


You can export a movie using the Render Queue at any stage in the process— 
whether you're creating a sample for a client to review, producing a low-res version 
to check the timing, or ready to create a final high-resolution movie. The settings 
you choose for each purpose are different, but the process is the same. 


You'll export a draft version of the On the Move movie using the Render Queue. 


1 Select the Movement composition in the Project panel, and choose Composition > 
Add To Render Queue. 


Output Module: Output To: 


» Tip: Alternatively, 
you can drag the 
composition from the 
Project panel onto the 
Render Queue panel. 
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After Effects opens the Render Queue panel. The Movement composition is in the 
queue. Note the default settings in the Render Settings and Output Module pop- 
up menus; by default, After Effects produces a full-size high-quality movie. You'll 
change the settings to create a low-resolution test file that will render quickly. 


Click the arrow to the right of Render Settings, and choose Draft Settings. 
Then, click the blue words “Draft Settings” 


Output To 


After Effects opens the Render Settings dialog box. You'll use most of the settings 
preselected in the Draft Settings template, but you'll reduce the resolution and 
ensure the entire composition is rendered. 


In the Render Settings dialog box, choose Third for Resolution. 


When you choose Third, After Effects renders one-ninth of the pixels in the com- 
position: one-third of the rows and one-third of the columns. 


In the Time Sampling area, choose Length of Comp for Time Span. 


e: Current Settings 
Current Settings 
Current Settings 
Read Only e All Off 


Current Settings 


Off for All Layers 


off 


Off for All Layers 


Length of Comp 
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5 Click OK to close the Render Settings dialog box. 


6 Choose Lossless from the Output Module pop-up menu, if it’s not already 
selected. If you’re using Windows, proceed to step 7. If you’re using macOS, click 
the blue word “Lossless.” Then, in the Output Module Settings dialog box, click 
Format Options. Choose DV25 NTSC from the Video Codec menu, and click 
OK. Click OK again to close the Output Module Settings dialog box. 


7 Click the blue words next to Output To. 


Output Module: 


8 Inthe Output Movie To dialog box, locate the Lessons/Lesson15 folder, and 
create a new folder called Final_Movies: 


e In Windows, click New Folder, and then type the name for the folder. 
e In macOS, click the New Folder button, name the folder, and click Create. 
9 Open the Final_Movies folder, if it’s not already open. 


10 Name the file Draft_RQ.avi (Windows) or Draft_RQ.mov (macOS), and then 
click Save to return to the Render Queue panel. 


g ) 
< =v co B Final_Movies Sa Q 
Name Date Modified ` Size Kind 


File Format: QuickTime (*mov) 
Save in subfolder 


Movement 


New Folder Cancel 
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@ Note: You do not 
need to render a movie 
multiple times to export 
it to multiple formats 
with the same render 
settings. You can export 
multiple versions of the 
same rendered movie by 
adding output modules 
to a render item in the 
Render Queue panel. 


> Tip: It’s easy to create 
an animated GIF from 
just about any short 
movie. Just add the 
composition to the 
Adobe Media Encoder 
queue, and choose 
Animated GIF for the 
format. 


11 Click the Render button in the Render Queue panel. 


After Effects renders the movie. If there were additional movies—or the same movie 
with different settings—in the queue, After Effects would render those, too. 


12 Navigate to the Lessons/Lesson15/Final_Movies folder, and then double-click 
your movie to preview it. 


If you need to make any final changes to the movie, reopen the composition and 
make those adjustments now. Remember to save your work when you finish, and 
then output the test movie again using the appropriate settings. After examining 
the test movie and making any necessary changes, you'll proceed with outputting 
the movie for full-resolution broadcast. 


Preparing movies for 
mobile devices 


You can create movies in After Effects for playback on mobile devices, such as 
tablets and smartphones. To render your movie, add the composition to the Adobe 
Media Encoder encoding queue, and choose an appropriate device-specific encod- 
ing preset. 


For the best results, consider the limitations of mobile devices as you shoot footage 
and work with After Effects. For a small screen size, pay careful attention to lighting, 
and use a lower frame rate. See After Effects Help for more tips. 
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Creating templates for the Render Queue 


When you output a composition, you can select individual render and output- 
module settings. However, you can also use templates to apply settings quickly. 
Templates are presets that streamline the setup process when you render items for 
the same type of delivery format. After you define templates, they appear in the 
Render Queue panel on the appropriate pop-up menu (Render Settings or Output 
Module). Then, when you're ready to render a composition, you can simply select 
the appropriate template for the delivery format that your job requires, and the 
template applies all the settings. 


Creating a render-settings template 


You can create render-settings templates for different circumstances. For example, 
you could create templates for rendering draft copies for review, high-res versions, 
or different frame rates. 


To create a render-settings template, choose Edit > Templates > Render Settings. In 
the Settings area of the Render Settings Templates dialog box, click New to create 

a new template. Then select the appropriate settings for the template. For Settings 
Name, type a name that describes the template’s purpose or use (for example, Test_ 
lowres). Click OK when you've made the changes. 


Render-settings templates you've saved are available on the Render Settings pop-up 
menu in the Render Queue panel. 


Creating templates for output modules 


You can use a similar process to create a template for output-module settings. Each 

output-module template includes unique combinations of settings appropriate for a 
specific type of output. 

To create a template, choose Edit > Templates > Output Module to open the Output 
Module Templates dialog box. In the Settings area, click New to create a new tem- 

plate. Then select the appropriate settings for the template. Name the template to 

indicate the output it will generate, and click OK to close the dialog box. 


Output-module templates you've saved are available on the Output Module pop-up 
menu in the Render Queue panel. 
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@ Note: If Adobe Media 
Encoder is not currently 
installed on your 
system, install it from 
Creative Cloud. 


Tip: You can also 
drag a composition 
into the Render Queue 
panel, and click Queue 
in AME to add it to the 
Adobe Media Encoder 
queue. 


P Tip: If you don't 
need to change 
anything else in the 
Export Settings dialog 
box, you can change 
the preset using the 
Preset pop-up menu in 
the Queue panel. 


Rendering movies with Adobe Media Encoder 


Your movie is ready for final output. Adobe Media Encoder, which is installed when 
you install After Effects, has the widest selection of codecs available for different 
delivery formats, including popular video services such as YouTube. 


Rendering a broadcast-quality movie 
First, you'll select settings to render your movie in a quality suitable for broadcast. 


1 In the Project panel, select the Movement composition, and choose Composition > 
Add To Adobe Media Encoder Queue. 


After Effects opens Adobe Media Encoder and adds your composition with default 
render settings. Your default settings may vary from ours. 


2 Click the blue link in the Preset column. 


J 


Adobe Media Encoder connects to the Dynamic Link server, which may take 
a few moments. 


3 When the Export Settings dialog box appears, choose H.264 from the Format 
menu, and then choose High Quality 1080p HD from the Preset menu. 
Export Settings 


H.264 


High Quality 1080p HD 


Rendering the full movie with the High Quality 1080p HD preset may take several 
minutes. You'll change the settings to render only the first three seconds of the 
movie so that you can preview the quality. You can change the range rendered 
using the time ruler at the bottom of the Export Settings dialog box. 
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4 Move the current-time indicator to 3:00, and then click the Set Out Point 
button (à) to the left of the Select Zoom Level pop-up menu. 


5 Click OK to close the Export Settings dialog box. 


6 Click the blue link in the Output File column. Name the movie 
HD-test_1080p.mp4, and specify the Lessons/Lesson15/Final_Movies 
folder. Then click Save or OK. 


You're ready to output this movie, but you'll set up a few additional movie options 


in the queue before you render it. 


About compression 


Compression is essential to reduce the size of movies so that they can be 
stored, transmitted, and played back effectively. When exporting or rendering 

a movie file for playback on a specific type of device at a certain bandwidth, you 
choose a compressor/decompressor (also known as an encoder/decoder), or codec, 
to compress the information and generate a file that is readable by that type of 
device at that bandwidth. 


A wide range of codecs is available; no single codec is the best for all situations. 
For example, the best codec for compressing cartoon animation is generally not 
efficient for compressing live-action video. When compressing a movie file, you 
can fine-tune it for the best quality playback on a computer, a video playback 
device, the web, or from a DVD player. Depending on which encoder you use, you 
may be able to reduce the size of compressed files by removing artifacts that inter- 
fere with compression, such as random camera motion and excessive film grain. 


The codec you use must be available to your entire audience. For instance, if you 
use a hardware codec on a capture card, your audience must have the same capture 
card installed, or a software codec that emulates it. 


For more information about compression and codecs, see After Effects Help. 
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Tip: If you render files 
frequently, consider 
setting up a“watch 
folder” When you place 
a file in the watch folder, 
Adobe Media Encoder 
automatically encodes 
it using the settings 
you've specified in the 
Watch Folders panel. 


Adding another encoding preset to the queue 


Adobe Media Encoder comes with dozens of built-in presets suitable for output 
for traditional broadcast, mobile devices, and the web. You'll output a version 
of your composition ready for posting to YouTube. 


In the Preset Browser panel, navigate to Web Video > Social Media > YouTube 
480p SD Wide. 


Preset Browser 


+ = 


Drag the YouTube 480p SD Wide preset onto the Movement composition 
in the Queue panel. 


Adobe Media Encoder adds another output item to the queue. 


Click the blue link in the Output File column for the item you just added. Then name 
the file Final_Web.mp4, specify the Lessons/Lesson15/Final_Movies folder, and 
click Save or OK. 
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Rendering movies 


You've set up two versions of your movie in the queue. Now you'll render and view 
them. Rendering is resource-intensive, and it can take a while, depending on your 
system, the complexity and length of the composition, and the settings you use. 


1 Click the green Start Queue button (*) in the upper right corner of the Queue panel. 


Adobe Media Encoder encodes the movies in the queue simultaneously, displaying 
a status bar and reporting the estimated time remaining. 


2 When Adobe Media Encoder has finished, navigate to the Final_Movies folder 
in the Finder or Explorer, and double-click your files to play them. 


Creating custom presets for Adobe Media Encoder 


In most cases, one of the default Adobe Media Encoder presets will be appropriate 
for your project. However, you can create your own encoding presets if you have 
specialized needs. In this case, you'll create a preset that renders a lower-resolution 
file for YouTube more quickly than the one you just encoded. 


Depending 

on your system, 
this may take 

a while. 


Ð Tip: If you forget 
where you saved your 
encoded movies, click 
the blue link in the 
Output File column next 
to the finished movie. 
Adobe Media Encoder 
opens a window to 
show you where your 
files were saved. 
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Click the Create New Preset Group button (Ml) at the top of the Preset Browser 
panel, and give the group a unique name, such as your name. 


Click the Create New Preset button (+), and choose Create Encoding Preset. 


3 g 
Create Encoding Preset. N 


Do the following in the Preset Settings dialog box: 
e Name the preset Low-res_YouTube. 
e Make sure H.264 is chosen from the Format menu. 


e Choose YouTube 480p SD Wide from the Based On Preset menu. 


Export Settings 


YouTube 480p SD Wide 


e Select the Video tab, if it’s not already selected. 


e For Frame Rate, deselect Based On Source. 
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e Choose Baseline from the Profile menu. (You may need to scroll down to see 
it and the following options.) 


e Choose 3.0 from the Level menu. 


e Make sure VBR, 1 Pass is chosen from the Bitrate Encoding menu. 


Bitrate Settings 


e Click the Audio tab, and choose 44100 Hz from the Sample Rate menu and Medium 
from the Audio Quality menu. 


Basic Audio Settings 


4 Click OK to close the Preset Settings dialog box. 


5 Drag the Low-res_YouTube preset onto the Movement composition in the 
Queue panel. 


6 Click the blue link in the Output File column. Then name the file Lowres_YouTube, 
specify the Lessons/Lesson15/Final_Movies folder, and click Save or OK. 


7 Click the Start Queue button (). 


With the settings in your new preset, the movie encodes more quickly. However, 
the quality isn’t as high. 


8 When Adobe Media Encoder has finished, navigate to the Final_Movies folder 
in Explorer or the Finder, and double-click the Lowres_YouTube movie to view it. 


You have created both a web version and a broadcast version of the final composition. 
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Preparing a movie 
for broadcast output 


The project you're rendering in this lesson is already high-resolution and appropri- 
ate for broadcast output. However, you may need to adjust other compositions for 
your intended delivery format. 


To change the composition size, create a new composition with the appropriate 
settings for your final format. Then drag the project composition into the new 
composition. 


If you converted the composition from a square pixel aspect ratio to a nonsquare 
pixel aspect ratio, which is used in broadcasting, items in the Composition panel 
may appear wider than before. To view the video accurately, enable pixel aspect 
ratio correction. Pixel aspect ratio correction squeezes the view of the composition 
slightly to display the image as it will appear on a video monitor. By default, this 
feature is turned off, but you can easily turn it on by clicking the Toggle Pixel Aspect 
Ratio Correction button at the bottom of the Composition panel. The quality of the 
pixel aspect ratio correction for previews is affected by the Zoom Quality preference 
in the Previews category of the Preferences dialog box. 


Congratulations! You have completed all the lessons in Adobe After Effects 
Classroom in a Book (2020 Release). 


While this book is intended to give you a good foundation for working with 
After Effects, it can’t cover everything. To continue learning about After Effects, 
check out the resources described in the Getting Started section at the beginning 
of the book. 
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Review questions 


1 


What is compression, and what are some things you should consider when 
compressing files? 


How can you output a movie using Adobe Media Encoder? 


Name two types of templates you can create for use in the Render Queue panel, 
and explain when and why to use them. 


Review answers 


1 


Compression is essential to reduce the size of movies so that they can be stored, 
transmitted, and played back effectively. When exporting or rendering a movie file for 
playback on a specific type of device at a certain bandwidth, you choose a compressor/ 
decompressor, or codec, to compress the information and generate a file readable by 
that type of device at that bandwidth. A wide range of codecs is available; no single 
codec is the best for all situations. For example, the best codec for compressing 
cartoon animation is generally not efficient for compressing live-action video. When 
compressing a movie file, you can fine-tune it for the best quality playback on a 
computer, a video playback device, the web, or from a DVD player. Depending on 
which encoder you use, you may be able to reduce the size of compressed files by 
removing artifacts that interfere with compression, such as random camera motion 
and excessive film grain. 


To output a movie using Adobe Media Encoder, select the composition in the Project 
panel in After Effects, and then choose Composition > Add To Adobe Media Encoder 
Queue. In Adobe Media Encoder, select an encoding preset and any other settings, 
name the output file, and click the Start Queue button. 


In After Effects, you can create templates for both render settings and output-module 
settings. These templates are presets that you can use to streamline the setup process 
when you render items for the same type of delivery format. After you define these 
templates, they appear in the Render Queue panel on the appropriate pop-up menu 
(Render Settings or Output Module). Then, when you're ready to render a job, you 
can simply select the template that is appropriate for the delivery format that your 
job requires, and the template applies all the settings. 
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Appendix: General keyboard shortcuts 


Result Windows macOS 
Select all Ctri+A Command+A 
Deselect all F2 or Ctrl+Shift+A F2 or Command+Shift+A 


Rename selected layer, composi- 
tion, folder, effect, group, or mask 


Enter on main keyboard 


Return on main keyboard 


Open selected layer, composition, 
or footage item 


Enter on numeric keypad 


Enter on numeric keypad 


Move selected layers, masks, effects, 
or render items down (back) or up 
(forward) in stacking order 


Ctrl+Alt+Down Arrow or 
Ctrl+Alt+Up Arrow 


Command+Option+Down Arrow 
or Command+Option+Up Arrow 


Move selected layers, masks, effects, 
or render items to bottom (back) or 
top (front) of stacking order 


Ctrl+Alt+Shift+Down Arrow or 
Ctrl+Alt+Shift+Up Arrow 


Command+Option+Shift+Down 
Arrow or 
Command+Option+Shift+Up Arrow 


Extend selection to next item in 
Project panel, Render Queue panel, 
or Effect Controls panel 


Extend selection to previous item 


Shift+Down Arrow 


Shift+Down Arrow 


in Project panel, Render Queue Shift+Up Arrow Shift+Up Arrow 
panel, or Effect Controls panel 

Duplicate selected layers, masks, 

effects, text selectors, animators, 

puppet meshes, shapes, render Ctrl+D Command+D 
items, output modules, or 

compositions 

Quit Ctrl+Q Command+Q 
Undo Ctrl+Z Command+Z 

Redo Ctrl+Shift+Z Command+Shift+Z 


Purge All Memory 


Ctrl+Alt+/ (on numeric keypad) 


Command+Option+/ (on numeric 
keypad) 


Interrupt running a script 


Esc 


Esc 
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Appendix: Customizing keyboard shortcuts 


After Effects includes a visual keyboard shortcut editor, similar to the one in Adobe Premiere Pro and 
Audition. To open the editor, choose Edit > Keyboard Shortcuts. 


You can edit keyboard shortcuts for almost any command, but the following keys are reserved and can- 
not be reassigned: A, AA, E, EE, F, FF, L, LL, M, MM, P, PP, R, RR, S, SS, T, TT, U, UU. 
Viewing shortcut key assignments 


You can see which keys have been assigned and which are available for assignment: 


e To see the full command name for a shortcut, hover over a key in the keyboard layout. 


e To see which keys require a modifier, press the modifier key on your keyboard. 

e To see the commands assigned to a key, select the key on the keyboard layout. 

Keys are color-coded to indicate whether they access application-wide or panel-specific shortcuts: 
Application-wide shortcuts are shaded in purple; panel-specific shortcuts are shaded in green. Keys 
shaded in both purple and green have both panel and application commands assigned to them. 
Editing a shortcut 

To edit a shortcut, do the following: 

1 From the Commands menu, choose Application or a panel name. 

2 Select a command from the list at the bottom of the Keyboard Shortcuts dialog box. 


3 Click the X to clear the shortcut key next to the command name, and then type the new shortcut. 
Select any modifiers from the list on the right. Or drag the command name onto a key. 


After Effects displays a warning if you’ve selected a key that cannot be reassigned, or if the shortcut may 
cause a conflict. 
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INDEX 


SYMBOLS 


3D 
adjusting depth of field 327 
axis 295 
camera layers 302 
cameras 302-303, 319-320 
casting shadows 301 
extruding text 305-307 
features 290-313 
lights 298-300 
point of interest 300, 304 
text 293-295 
views 296—297 
3D Camera Tracker effect 316-334 
3D layers 
Position properties 187 
rotating 187 
Rotation properties 295 
3D Layer switch 295 
-mogrt files 
opening in After Effects 285 


opening in 
Premiere Pro 287—288 


A 


action-safe zones 24. 


activating fonts 
in Adobe Fonts 2, 62—64 


Active Camera view 302 
adding 
blur 264—265 
text 62—67, 274 
transitions 243-245 
vignettes 192, 265-266 


Add mask mode 252 
adjustment layers 49, 138, 263, 277 


Adobe After Effects application 
compositions 12 
installing 2 
optimizing performance in 3 
projects 12 
workflow 11 
workspace 10 
Adobe After Effects Classroom in a 
Book (2020 Release) 
downloading lesson files 4 
prerequisites 2 
Adobe After Effects Help 36 
Adobe Audition 142 


Adobe Bridge 
about 41 


browsing animation 
presets in 69 


importing files with 41 
installing 2, 41 
navigating folders in 41 
opening 41 

previewing images in 42 
workspaces 42 
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Adobe Character 
Animator 216 


Adobe Fonts 2, 62—86 

Adobe Illustrator files, 
importing 45 

Adobe Media Encoder 


creating presets 
for 383-386 
encoding 
presets in 382 
installing 2 
rendering output 
with 380-385 
Adobe Photoshop files 
importing 148 
importing layer styles 
from 153 
importing 
text from 72 
layered 147 


Adobe Premiere Pro 
Motion Graphics 
templates in 287 
using with 
After Effects 224 
Adobe Stock 117 


Advanced pins 
about 206 
animating 212 
placing 208 
using to animate 
video 213-214 


alpha track mattes. 
See track mattes 


ambient lights, adding 333 


Analyze Forward 
button 348 


INDEX 


anchor points 
adjusting 119 
centering in 
shape layers 92 
animating 
facial expressions 216 
fill color 104 
layers 144-175 


layers to 

match audio 112 
lighting 

149-150, 161-165 
ona path 127 
opacity 77 
position 

83-85, 103, 106—107 


precomposed 
layers 136 


Puppet tool pins 214 
scale 67, 103 


text 60-87, 
72, 81, 233 
video with Puppet 
tools 213-214 
animation presets 
applying 25-26, 50 
applying from Adobe 
Bridge 70 
Bad TV 3 - weak 277 
browsing in 
Adobe Bridge 41, 69 
Bullet Train 50 
customizing 70 
Dissolve - Vapor 52 
Explosion 2 276 


Fade Out By 
Character 79 


Fade Up Words 25 
Fly in with a Twist 203 


Increase Tracking 75 
Raining 

Characters In 74 
Ripple 70 
Slow Fade On 204 
text 69 
Typewriter 276 


animations 
about 22 


creating with 
Character 
Animator 216 


duplicating using 
pick whips 151 
easing 68 
linking through 
expressions 154 
repeating 130 
animator properties in text 
animator groups 81 
application window 10 
assets, importing 13 
audio 
adding tracks 141 
animating 
layers to match 112 


editing files in Adobe 
Audition 142 


file formats 
supported 141 


Audio/Video Switches in 
the Timeline panel 27 


Audition. 
See Adobe Audition 


Auto Contrast 
effect 19-20 


Auto Levels effect 255 


B 


background, replacing 
250-254 


background strokes, 
creating with the Roto 
Brush tool 224-225 


Bad TV 3 - weak animation 
preset 277 


base frames, creating 
with the Roto Brush 
tool 222-223, 227 
Bend pins 
about 206 
animating 212 
placing 208 
Bezier curves 


breaking direction 
handles for 183 


in a motion path 128 

in masks 181 
Bezier masks, creating 184 
bicubic scaling 339 
bilinear sampling 339 
blending modes 

about 191 

applying 191 

for masks 183, 251 


blur, adding 264-265. 
See also motion 
blur, adding 


Bridge. See Adobe Bridge 


brightness, changing 
in the user interface 35 


broadcast, preparing 
a movie for 386 


Browse Presets 
command 69 


Bullet Train 
animation preset 50 


C 
cached frames, using 
Roto Brush tool 226 


cameras, adding 
to a 3D scene 302-303 


Casts Shadows 
property 301 


CC Light Sweep 
effect 21-22 


CC Particle Systems II 
effect 355-370 


CC Toner 262-263 


Center Anchor Point In 
New Shape Layers 92 


Channel Blur effect 28-29 
Character Animator 216 


Character 
panel 25, 47, 65, 294 


checkboxes, adding 
to Motion Graphics 
templates 282-284 


child layers 108 

Cinema 4D Lite 312-313 
Cineware effect 312 
circles, drawing 194 
Clone tool 267-268 
codecs 381 


color 


adjusting color 
balance 245 


animating 104 


changing 
for a shape 93 
keying 220 
mapping 262-263 
color correction 
about 242 
performing 240—269 
previewing 
accurately 244 
using 
Auto-Levels 255 
using the 
Lumetri Color 
effect 248—249 
Color Emboss effect 49 


color 
grading 242, 262-263 


Color Range 
effect 259-260 
Composition 
Navigator bar 23 
Composition panel 
about 15 
splitting into multiple 
views 296 
typing in 65 
compositions 
about 15 
adding 
footage to 16, 44 
creating 15, 43, 61, 273 


creating from 
footage 90 


defined 12 

fitting layers to 44 
importing 13 
nesting 16 
rendering 54 
retiming 165-174 
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Composition Settings 
dialog box 16-17, 43 


compression 381 


Content-Aware 
Fill 349-353 


Convert To Editable Text 
command 24, 73, 203 


Convert Vertex 

tool 181-182 
copying layers 125 
Corner Pin effect 159-160 


Create Nulls From Paths 
panel 109-110 


Create Text And Camera 
command 320 
creating 
compositions 
15, 43, 61 
shape 
layers 88, 345-346 
text 46 


Creative Cloud Libraries 
about 117 


sharing Motion 
Graphics templates 
in 285-286 


current-time indicator 27 


curves, in the Lumetri 
Color effect 249 
customizing 


brightness of the user 
interface 35 


workspaces 34 


custom shapes, 
drawing 98-99 


Custom View 1, 
in 3D views 297 


INDEX 


D 


default preferences 3, 11 


deforming video with 
Puppet tools 213-214 


Deform pins. 
See Position pins 


Density value 
for Puppet tools 210 


dependencies, 

finding missing 14 
depth of field, 

adjusting 327-328 
Directional Blur effect 134 


direction handles, 
breaking 183 


Dissolve-Ripple effect 333 


Dissolve - Vapor 
animation preset 52 


distortions, 
rolling shutter 318 


docking panels 10 
downloading lesson files 4 


drawing 
circles 360 
custom shapes 98 
ellipses 193 


rounded 
rectangles 99 


shapes 91 
stars 92 
with the 
Pen tool 98, 105 
drift, 
in motion tracking 349 


dropdown menus, 
creating 279 


Drop Shadow effect 48 
drop zone 10 


duplicating 
animations 130 


animations using pick 
whips 151 


objects 
in a scene 267—268 


shape layers 95 

videos 132 
duration 

about 26 

changing 196 


E 
Easy Ease 
adding 68 
in the 


Graph Editor 369 
editing 
masks 180 


Premiere Pro clips in 
After Effects 224 


segmentation 
boundaries 
225-226 


text 24, 46—47, 73 
Effect Controls panel 

about 48 

hiding properties in 22 
effects 

about 18 

applying 49, 133 

Auto Contrast 19—20 

Auto Levels 255 

CC Light Sweep 21-22 


CC Particle Systems II 
355-370 


Channel Blur 28-29 
Color Emboss 49 
Color Range 259-260 


controlling 49 

Corner Pin 159-160 
Directional Blur 134 
Dissolve-Ripple 333 


Dissolve - Vapor 
animation 
preset 52-53 


Drop Shadow 48 
Fade Up Words 26 
finding 20 

Fractal Noise 134 


Gaussian 
Blur 264, 359 


Glow 234 
Hue/Saturation 232 
Lens Flare 363 
missing 14 

motion blur 85 
Ramp 362 


Refine Hard 
Matte 229 


Refine Soft Matte 229 
Timewarp 365 
Wave Warp 138 
Effects & Presets 
panel 19, 20 
Ellipse tool 


creating a vignette 
with 193 

using to create 
amask 194, 360 


encoding presets in Adobe 
Media Encoder 382 
Essential Graphics panel 
about 272, 278 
adding checkboxes 
to 282—284 
adding properties 
to 279-284. 
editing 
source text in 279 


exporting templates 
from 285-286 


grouping 
properties in 281 
in Premiere Pro 287 
organizing 281 
viewing supported 
properties 280 
Essential Graphics 
workspace 278 
exporting 
Motion Graphics 
templates 285-286 


movies with Adobe 
Media Encoder 
380-386 


expressions 154, 268 
extruding text 305-312 


F 


face tracking 237 


Fade Out By Character 
animation preset 79 


Fade Up Words animation 
preset 26 


feathering masks 189 

fills 93 

filtering in Adobe Fonts 63 

finding missing footage, 
fonts, or effects 14 

Fit To Comp command 44 


Fit To Comp Width 
command 66 


Fly in with a Twist 
animation preset 203 


fonts 
finding missing 14 
installing from Adobe 
Fonts 2, 62-65 
selecting 65 
footage 
about 13 
finding missing 14 
importing 12, 14, 146 
tracking 318 
using Adobe Bridge to 
import 41 


foreground strokes, 
creating with the 
Roto Brush tool 222-223 
Fractal Noise effect 134 


freezing Roto Brush tool 
results 231 


G 


Gaussian Blur 
effect 264, 359 


Glow effect 234 
gradient fills 93 
Graph Editor 
about 168 
using to remap time 
169-173, 369 
grids 
displaying 
and hiding 47, 67 
snapping to 67 
ground planes, 
creating with 3D Camera 
Tracker effect 319 
grouping properties 
in the Essential Graphics 
panel 281 


guides, showing 47 
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H 

HDR (high dynamic range) 
footage 365 

hiding properties 22 

Home key 25 

Home window 11, 36 


Horizontal Type 
tool 24, 46, 75 


Hue/Saturation effect 232 


Illustrator files, 
importing 45—46 
images, adding to 3D 
scenes with 3D Camera 
Tracker 326 
importing 
files from 
Adobe Bridge 42 


footage 
12, 13, 14, 41, 146 


layered Illustrator 
files 45—46 


layered Photoshop 


files as compositions 


13, 23, 146-148 
multiple files 13 


Photoshop 
files 13, 72, 148 


text 72-73 


Increase Tracking 
animation preset 75 


Increment And Save 
command 233-234 


Info panel 13 


In points, 
setting 27, 139, 194 


INDEX 


installing 
After Effects 2 
fonts 62—64 


interpolation between 
keyframes 28 


J 


JavaScript 
in expressions 154 


K 


keyboard shortcuts 388 


keyframes 
about 28, 29 
adding 125 
keying 
about 220 


with Color Range 
effect 259-260 
with Keylight 1.2 
effect 252-254 


Keylight 1.2 effect 252-254 


L 


layer features, used when 
snapping 100 
layers 
about 15, 17 
adjustment 138 
animating 
144, 144-175 
animating to 
match audio 112 
child 108, 121 


converting 
to 3D layers 297 


copying 125 


expanding in the 
Timeline panel 19 
fitting to 
compositions 44 
importing in 
Photoshop files 148 
light, 3D 298-300 
locking 202 


making visible in the 
Timeline panel 30 
naming in 
Photoshop 148 
naming text layers 47 
nesting 51 


parenting 
107, 108, 121 


precomposing 
51, 97—98, 123, 264 


rearranging in the 
Timeline panel 18 


renaming 73 

scaling 204 

setting In points 
for 139 

shape 88-113, 91 

snapping 99 

solid 134 

text 62 


Transform 
properties 18-19 


trimming 138, 277 
layer styles 153 


Layer switches in the 
Timeline panel 27 


learning resources for 
Adobe After Effects 6 


Learn panel 36 
Lens Flare effect 363 


lesson files, downloading 4 


Levels (Individual 
Controls) effect 246 


Libraries panel 117 
lighting, 
simulating changes 
in 149-150, 161-165 
lights 
adding toa 
3D scene 298-300 
point 332 
Light Settings 
dialog box 299 


linked assets 14 


linking animations 
through expressions 154 


locking layers 202 


Lumetri Color 
effect 248—249 


M 


Mask Expansion 
setting 252 


Mask Feather tool 189 
mask modes 251-252 


masks 
about 178 
Bezier 181, 184 
creating 351-352 


creating with the Pen 
tool 161—162, 180 


curved 181 
drawing with 
shape tools 194 
editing 180 
feathering 189 
inverting 181 
modes for 183 


modifying with the 
Convert Vertex 
tool 181 


properties, 
displaying 181 
replacing 
content of 186 
segments 178 
tips for creating 195 
tracking 250 
vertices 178 
working with 176 


mask tracker 
250-251, 258-259 


master properties 282 


Material Options 
properties 295, 301 
mattes 
about 220 
adjusting with the 
Refine Edge tool 
229-230 


screen 254 

track 154-157, 157 

traveling 157 

viewing against 
black 225 

viewing with red 
overlay 225 


Maxon Cinema 
4D Lite 312-313 


Media Encoder. 
See Adobe Media Encoder 
meshes 
adjusting the 
Density value 210 
changing 
the color of 209 


used with 
Puppet tools 206 


missing fonts, 
effects, or footage 14 


mobile devices, preparing 
compositions for 378 


Mocha AE plug-in 353 
modes, mask 183 
motion blur, 
adding 85, 158 
Motion Graphics templates 
about 272 
creating 270-289 
exporting 285-286 
making source text 
editable in 279 
opening in After 
Effects 285 
providing image 
options in 282-284 
sharing 272 
specifying master 
compositions 
for 278 


using in 
Premiere Pro 287 


motion paths, 
customizing 127 


Motion Source 346 
Motion Target 346 
motion tracking 
analyzing and 
applying 348 
managing drift 
when 349 
single-point 343-349 
using track points 
255-257, 261-262 
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N 
navigating folders 
in Adobe Bridge 41 
nesting compositions 16, 51 


New Composition 
button 273 


New Composition from 
Footage button 90 


NTSC D1 preset 43 


null objects 
about 109 


creating from 
paths 109-110 


(0) 


opacity 
animating 77 
modifying 53 


Opacity property, 
displaying 29 


optimizing performance 
in After Effects 3, 32 


Out point 27 


output modules in the 
Render Queue panel 55 


outputting 
projects 372-387 


overlap, defining 
areas of 210 


Overlap pins 206 


overscan 24 


INDEX 


P 


Pan Behind tool 120 


panels 
docking and 
arranging 10 
maximizing 12 
menus 27 


panning with touch 
gestures 186 


Paragraph panel 66 
paragraph text 62 
parenting 
about 108 
layers 107, 121 


layers to null 
objects 109-110 


particle systems, 
creating 355-370 


path operations 
about 102 
Pucker & Bloat 102 
Wiggle Paths 93 
Pen tool 98, 105, 180 
performance, 
optimizing 3, 32 
Photoshop. 
See Adobe Photoshop files 
pick whip 151 
pixel aspect ratio 386 
point of interest 
for a 3D light 300 


for a camera 
layer 304 


point text 65 


position, animating 
83, 103, 106-107 


positioning objects using 
ruler guides 47 
Position pins 
adding 206-208 
animating 212 
Position property 
displaying in the 
Timeline panel 19 
for a 3D layer 187 


Pre-compose 
dialog box 51, 123 


precomposed layers, 
animating 136 


precomposing layers 
51, 52, 97—98, 123, 
165-166, 264 

preferences 


Center Anchor Point 
In New Shape 
Layers 92 

location of files 3 

restoring defaults 3 

restoring defaults in 
Windows 11 


Premiere Pro. 
See Adobe Premiere Pro 
presets 
browsing in Adobe 
Bridge 69 


creating for 
Adobe Media 
Encoder 383-386 


finding 20 
previewing 
compositions 30 


images in Adobe 
Bridge 42 
manually 51 


Preview panel 
in Adobe Bridge 42 
in After Effects 30 
Project panel 
about 14 
opening 54 
projects 
about 12 
saving 15 
properties 
displaying 
multiple 125 
grouping 
in the Essential 
Graphics panel 281 


hiding 22 
Pucker & Bloat 102-103 
Puppet Advanced Pin tool 
about 206 
using 208-209 
Puppet Bend Pin tool 
about 206 
using 208 
Puppet Overlap Pin tool 
about 206 
using 210 
Puppet Position Pin 
tool 206 


Puppet Sketch 
tool 214-215 


Puppet Starch Pin tool 
about 206 
using 211 


puppet tool 
pins 206-207, 208-210 


Puppet tools 
about 205 


distorting objects 
with 198-217 


recording animation 
with 214 


using the mesh 206 


Q 


QuickTime 
required version 2 


R 
Raining Characters In 
animation preset 74 
Ramp effect 362 
Rectangle tool 194 


red overlay in matte 
preview 225 


Reduce Chatter value 229 
Refine Edge tool 229-230 


Refine Hard Matte 
effect 229 


Refine Soft Matte 
effect 229 


reflections, adding 188 


remap-time marker in the 
Source Time ruler 168 


removing objects from 
footage 349-353 


Renderer options in the 
Cineware effect 312 


rendering 
compositions 54 


for mobile 
devices 378 


movies 372-387 
templates 379 


using compression 
in 381 

using the 
Render Queue 
panel 236, 375-381 


with Adobe Media 
Encoder 380-385 


Render Queue panel 54, 
236, 379-386 


Render Settings options 55 


render-settings templates 
379-383 


replacing content 
using amask 186 


replacing objects 
with content-aware 
fill 349-353 


resizing layers 204 


resources for using 
After Effects 36 


Responsive 
Design - Time 284-285 


restoring default 
preferences 3, 11 


retiming compositions 
165-174, 365 


Ripple animation preset 70 


rolling shutter distortions, 
repairing 318 
rotating 3D layers 187 


Roto Brush & 
Refine Edge effect 228 
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Roto Brush tool 


creating background 
strokes 224—225 


creating foreground 
strokes 222-223 

freezing results 230 

refining a 
segmentation 
boundary 225-226 


using 218-239 
rotoscoping 220 
Rounded Rectangle tool 99 


rulers, showing 47 


S 


safe zones 24 


sample text, using in 
Adobe Fonts 63 


sampling algorithms 339 
saving projects 15 
scale 
animating 67, 103 
modifying 204 
screen matte 254 
segmentation boundary 
about 222 
creating 222-225 
refining 225 
segments in a mask 178 


selectors in text animator 
groups 81 


Select View Layout 
pop-up menu 296 


INDEX 


separating 
background from 
foreground 220-239 


Sequence Layers 
option 245 


shadow catcher 332 


shadows 


adding to a 3D 
scene 301 


creating with the 3D 
Camera Tracker 
effect 331 

shape layers 

about 88, 90 

adding 91 

applying fills 
and strokes to 93 


centering anchor 
points in 92 


creating 91, 345-346 
duplicating 95 
shapes 
custom 98-99 
drawing 91, 98 
self-animating 93 
shortening layers 139, 196 
Shutter Angle 158 
Shutter Phase 158 
Slow Fade On 
animation preset 204 
snapping 
about 100 
layers 99-103 


temporarily 
enabling 101 


Snap to Grid command 67 


solid layers 
creating 134 


using to create 
particle systems 356 


using with 3D Camera 
Tracker 326-327 


Solo Supported Properties 
in the Essential Graphics 
panel 280 


sorting fonts in 
Adobe Fonts 63 


Source Text property 279 


Source Time ruler in 
time remapping 168 


span, extending for 
Roto Brush tool 226 


Specular Intensity 301 
Specular Shininess 302 


splitting the 
Composition panel 
into multiple views 296 


squares, drawing 194 


squash and stretch 
animation 211 


stacked panels 10 


Starch pins 
about 206 
adding 211 


Star tool 92 


Stock images 
in Libraries panel 117 


strokes 93 
Subtract mask mode 252 


Sync Selected Fonts 64 


T 


templates for 
rendering 379-383 


templates, Motion 
Graphics 278 
text 
adding 62-67, 274 
animating 
60-87, 72, 74, 81, 
233-235, 274—276 
animating tracking 
in 75 
animation presets 
for 25-26, 69 
centering 294 


converting to 
editable 23-24, 73 
creating 46 
creating 3D 293-295 
editing 24, 47, 73 
editing imported 203 
entering in the 
Composition 
panel 65 
extruding 305-307 


formatting 
65, 234, 274 


imported from 
Photoshop 72 


layers 62 


making editable in 
Motion Graphics 
templates 279 


point 65 


positioning 66 
text animator 
groups 80 
text layers 


converting to 
editable 203 


naming 47 
time 
current-time field 27 


current-time 
indicator 27 


duration 26 


protecting 
duration 284—285 


timecode 26 
time graph 27 


time-lapse simulation, 
creating 165 


Timeline panel 
about 27 
expanding 
layers in 19 
renaming layers in 73 


Time Remap 
keyframes 169 


Time Remapping 167-171 
time ruler 27 

Timewarp effect 365-370 
title-safe zones 24 


Toggle Alpha Boundary 
button 225 


Toggle Alpha button 225 


Toggle Alpha Overlay 
button 225 


Toggle Transparency Grid 
button 231 
tools 
about 25 
Clone Stamp 267-268 
drawing 91 
Ellipse 194 
Mask Feather 189 
Pan Behind 120 
Puppet 205 
Rectangle 194 
Tools panel 25 
touch gestures 186 
Track Camera 
command 319 
Tracker panel 251, 256 
tracking 
animating for text 75 
faces 237 


masks 
258-259, 351-352 


motion 261-262 
using Mocha AE 353 
tracking motion 
single-point 343—349 
using the 3D Camera 
Tracker 318-319 


tracking points for 
3D Camera Tracker 319 


tracking presets 76 
track mattes 154—157 
Track Motion 256 


track points 256-257 


moving and 
resizing 347 
positioning 346-348 
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402 


Track Selected Masks 
Backward button 251 


Transform properties 19 


transitions, 
adding 243-245 


transparency 53. 
See also opacity 


traveling mattes 157 
trimming 
layers 138, 277 
the work area 196 


type, editing 24 


Typewriter animation 
preset 276 


U 
Ukey 74 


undocking panels 10 


Use Dimensions From 
menu 16 


User Interface Colors 35 


user interface 10 


INDEX 


V 
vertices 
converting 181 
in a mask 178 
video 


animating with Puppet 


tools 213-214 
duplicating in a 
timeline 132 


Video switch 30, 52 
views, 3D 296 
vignettes, adding 192, 265 


Ww 
Warp Stabilizer 
VFX 338-343 
Wave Warp effect 138 
Web Edition 4 


white balance, 
adjusting with the 
Lumetri Color effect 248 


Wiggle Paths 94 
work area 
brackets 27 
introduction to 10 
trimming in the 
Timeline panel 196 


workflow 11 


workspaces 
about 10 
customizing 10, 34 
Essential Graphics 278 
in Adobe Bridge 42 
Learn 36 
predefined 33 


X 


x axis in the 3D axis 295 


Y 


y axis in the 3D axis 295 


Z 


z axis in the 3D axis 293, 295 


zooming with touch 
gestures 186 
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